Йота 

Как создать круглую кнопку в с. Как создать круглую Progress Button

Сегодня я хочу рассказать Вам как сделать стильные кнопки на чистом CSS. Делать мы будем 4 стиля, это кнопки залитые одним цветов, кнопки, которые обведены границей, стиль кнопок с тенью и заливкой и последний 4 стиль это кнопки с эффектом нажатия. Всё это добро мы будем делать без использования каких либо скриптов, в только на CSS.

Демо Ι

Код HTML для кнопок

HTML код мы будем использовать очень простой. Для каждой из кнопок мы зададим отдельные классы. А так же зададим классы для применения эффекта при наведении и активации нашей будущей кнопки. В общем вот сам код:

Стили CSS для всех кнопок

Разные браузеры некоторые стандартные правила CSS отображают немного по разному. По этому в следующем коде CSS мы сбросим все стили, и добавим некоторые значения по умолчанию. Вот как выглядит код:

Button { display: inline-block; margin: 0 10px 0 0; padding: 15px 45px; font-size: 48px; font-family: "Bitter",serif; line-height: 1.8; appearance: none; box-shadow: none; border-radius: 0; } button:focus { outline: none }

Это совсем не сложно. Ну а сейчас давайте подробнее рассмотрим каждый из 4 стилей наших стильных кнопок.

Плоские кнопки залитые фоном

Подобный тип кнопок очень популярен в настоящее время, так как он отвечает всем современным тенденциям веб дизайна. Другими словами это плоский стиль или Flat дизайн. Тем более люди привыкли к таким кнопкам и охотно по ним кликают.

На этом изображении показано три состояния кнопки, обычное (по умолчанию), при наведении и при клике или же действии:

CSS код этих кнопок очень прост. Это огромный плюс мне кажется:

Section.flat button { color: #fff; background-color: #6496c8; text-shadow: -1px 1px #417cb8; border: none; } section.flat button:hover, section.flat button.hover { background-color: #346392; text-shadow: -1px 1px #27496d; } section.flat button:active, section.flat button.active { background-color: #27496d; text-shadow: -1px 1px #193047; }

Стиль кнопок с бордюрами или границами

Этот стиль кнопок находится в то же классе, что и плоские кнопки Единственное различие лишь в том, что здесь мы убираем заливку, а вместо неё задаём правила для отображения бордюра кнопок. Вот на этом изображении всё ясно показано:

И как обычно код CSS очень прост, мы просто добавляем правила для появления бордюра:

Section.border button { color: #6496c8; background: rgba(0,0,0,0); border: solid 5px #6496c8; } section.border button:hover, section.border button.hover { border-color: #346392; color: #346392; } section.border button:active, section.border button.active { border-color: #27496d; color: #27496d; }

Кнопки с тенью и градиентом на CSS

Этот стиль кнопок можно смело назвать уже устаревшим, но и сейчас его можно встретить на просторах интернета. Если эти кнопки подходят под стиль Вашего сайта, то они именно для Вас. Они тоже делаются очень просто, вот изображение:

В CSS мы будем использовать правила тень и заливки градиента. При наведении тень будет появляться вокруг кнопки а при нажатии внутри.

Section.gradient button { color: #fff; text-shadow: -2px 2px #346392; background-color: #ff9664; background-image: linear-gradient(top, #6496c8, #346392); box-shadow: inset 0 0 0 1px #27496d; border: none; border-radius: 15px; } section.gradient button:hover, section.gradient button.hover { box-shadow: inset 0 0 0 1px #27496d,0 5px 15px #193047; } section.gradient button:active, section.gradient button.active { box-shadow: inset 0 0 0 1px #27496d,inset 0 5px 30px #193047; }

Стильный эффект нажатия

Этот стиль тоже сейчас пользуется большой популярностью и широко используется в дизайне сайтов. Пользователю кажется, что кнопка ка будто и правда нажимается. Вот на изображении подробно видно:

CSS здесь немного будет сложнее и требует использовать немножко математики. Но и это можно с лёгкостью понять. В общем не так уж и всё страшно. Под кнопкой мы поместим не размытую тень, что бы она дала эффект 3D кнопки или же казалась немного выпирающей. При наведении на кнопки мы сделаем фон темнее. А когда пользователь будет нажимать на кнопку мы изменим в стилях позицию самой кнопки. А чтобы это всё выглядело более эффектно и плавно мы добавим CSS3 трансформацию (translateY). Таким образом кнопка будет плавно опускаться вниз. А вот и сам CSS код:

Section.press button { color: #fff; background-color: #6496c8; border: none; border-radius: 15px; box-shadow: 0 10px #27496d; } section.press button:hover, section.press button.hover { background-color: #417cb8 } section.press button:active, section.press button.active { background-color: #417cb8; box-shadow: 0 5px #27496d; transform: translateY(5px); }

Демо Ι

Заключение

Вот и всё! Теперь у Вас есть стильные и современные кнопки, которые Вы можете использовать для Ваших потребностей. Естественно Вы можете их изменять до не узнаваемости, это ведь только самый простой пример реализации подобного рода кнопок. Надеюсь, что Вам понравился этот урок. До скорых встреч!

При создании дизайна постоянно сталкиваешься с необходимостью стилизованных под конкретный дизайн кнопок, а рисовать постоянно картинки не удобно, да и не практично.

Здесь представлены .

Создание круглых ссылок-кнопок с помощью CSS

Минус этого метода в наличии большого количества span-ов и наличие двух графических файлов для создания фона. К плюсам можно отнести появляющуюся рамочку вокруг кнопки при наведении мышкой и возможность изменения высоты кнопки.

К минусам пожалуй относится достаточно сложная релизация данного способа. К плюсам конечно то, что здесь используется PNG с уже исправленым багом в IE. Статья на русском.

Минус: тег button не всегда удобен для использования. Плюс: эффект нажатия.

Минус: слишком большое количество тегов i при реализации. Плюс: не зависит от размера шрифта, быстрое создание нового скина, не зависит от фона на котором лежит, при отключенных картинках белая ссылка будет на нужном фоне (в данном случае оранжевом). Статья на русском.

Минус: простота оформления. Плюсы: не зависит от размера шрифта, всего один файл для создания оформления и очень простая реализация.

Минус: наличие div`а при реализации, два файла картинок.

Простые круглые кнопки с помощью CSS (Wii Buttons)

Плюсs: всего один файл для создания оформления, очень простая реализация, достаточно красивое оформление.

Оформление кнопки с помощью «раздвижных дверей»

Минусы: два файла картинок, проблемы с эффектом нажатия кнопки. Плюсы: красивое оформление.

Создание красивых кнопок с помощью CSS

В минусах этого метода так же наличие двух картинок для фонов. Плюс: очень простая реализация.
Прекрасный эффект на круглых кнопках, что имеют свой отдельный оттенок, где при наведении на нее разворачивается фон, и на нем написано. Сами записи имеют ключевые слова, так как можно уменьшить шрифт и поместить на вон как можно больше количество. Они по умолчанию идут в круглой форме, где на них аналогично идет запись, что они подойдут на все тематические сайты. Где все они изначально поставлены на определенные ссылки для перехода на категорий или разделы.

Сам фон выставляется с разворота, и он будет прозрачен, что на темном или светлом фоне смотрится отлично. Главное, чтоб на самой гамме шрифт читабельный был. Но здесь веб мастер по свою стилистику, что у него на ресурсе идет как основа, и нужно производить настройку. Если вам нужно поставить один элемент, то просто с кода убираем лишнее, а вот если наоборот добавить, то здесь все просто.

Нужно изначально задать свой класс, что будет отвечать на палитру цвета, и выставлять то количество, сколько вам требуется. Вот как раз для всех элементов установлены атрибуты id и class, который будет указывать их назначение и безусловно все эффекты, что закреплены на ним. Сам дизайн с эффектом так выполнен, что на простой софт портал можно поставить, но не там будет гармонично, больше всего они отлично подойдут на новые авторские ресурсы.

Расмотрим в рабочем виде:

Приступаем к установке:


  • ZR-1Скрипты и шаблоны на сайте zornet.ru

  • ZR-2Здесь найдете тематические шаблоны сайта.

  • ZR-3Также не обойтись без стилистики на zornet.ru


CSS

* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

Body {
width: 100%;
height: 100%;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 13px;
text-align: center;
background: #1f1e1e;
}

Ul {
margin: 25px auto;
text-align: center;
}

Li {
list-style: none;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
}

@-moz-keyframes rotate {

}

@-webkit-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}

@-o-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}

@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}

Kingapensive {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 30px;
text-decoration: none;
text-align: center;
font-size: 23px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
font-family: "Hammersmith One", sans-serif;
-webkit-transition: all .25s cubic-bezier(0.42, 0, 0.52, 0.96);
-o-transition: all .25s cubic-bezier(0.42, 0, 0.43, 0.94);
-moz-transition: all .25s cubic-bezier(0.42, 0, 0.33, 0.94);
transition: all .25s cubic-bezier(0.42, 0, 0.45, 0.96);
box-shadow: 3px 4px 5px rgba(27, 26, 26, 0.25);
border-radius: 300px;
z-index: 1;
border-width: 5px;
border-style: solid;
}

Kingapensive:hover {
width: 129.7%;
height: 130%;
left: -15%;
top: -15%;
font-size: 29px;
padding-top: 41px;
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
box-shadow: 5px 5px 10px rgba(0,0,0,.3);
z-index: 2;
border-size: 9px;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}

A.lerstasirodu {
background-color: rgb(47, 187, 41);
color: rgb(25, 38, 84);
border-color: rgba(133, 125, 28, 0.25);
}

A.lerstasirodu:hover {
color: rgb(42, 210, 146);
}

A.discusomplica {
background-color: rgb(7, 172, 193);
color: rgb(4, 57, 64);
border-color: rgba(3, 48, 53, 0.27);
}

A.discusomplica:hover {
color: rgb(6, 66, 74);
}

A.zornertumiksa {
background-color: rgb(204, 184, 15);
color: rgb(62, 23, 10);
border-color: rgba(136, 40, 9, 0.2);
}

A.zornertumiksa:hover {
color: rgba(252,227,1,1);
}

Kingapensive span.kingapensive {
display: block;
opacity: 0;
-webkit-transition: all .5s cubic-bezier(0.42, 0, 0.51, 0.99);
-moz-transition: all .5s cubic-bezier(0.42, 0, 0.52, 1.01);
-o-transition: all .5s cubic-bezier(0.42, 0, 0.49, 0.98);
transition: all .5s cubic-bezier(0.42, 0, 0.49, 0.96);
font-size: 1px;
border: none;
padding: 40% 20% 0 20%;
color: #f9f2f2;
}

Kingapensive span:hover {
opacity: .85;
font-size: 15px;
-webkit-text-shadow: 0 1px 1px rgba(14, 14, 14, 0.55);
-moz-text-shadow: 0 1px 1px rgba(19, 18, 18, 0.56);
-o-text-shadow: 0 1px 1px rgba(14, 14, 14, 0.58);
text-shadow: 0 1px 1px rgba(14, 14, 14, 0.55);
}

Discusomplica span {
background: rgba(6, 61, 68, 0.89);
}

Lerstasirodu span {
background: rgba(45, 133, 28, 0.7);
}

Zornertumiksa span {
background: rgba(161,145,0,.7);
}


Отдельные части стиля, веб матер может редактировать в гамме, а эффект очтавить как идет.

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.

В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.

Код Описание Вид
div { border-radius: 10px; } Радиус скругления для всех уголков сразу.
div { border-radius: 0 10px; } Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.
div { border-radius: 20px 10px 0; } Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.
div { border-radius: 20px 10px 5px 0; } Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.

В примере 1 показано создание блока со скруглёнными уголками.

Пример 1. Уголки у блока

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Радиус

Меня - супплетивная форма винительного падежа от я.

Результат данного примера показан на рис. 1.

Рис. 1. Блок со скруглёнными уголками

Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.

Пример 2. Круглая кнопка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Кнопка

Результат данного примера показан на рис. 2.

Рис. 2. Круглая кнопка

В браузере Opera скругление к

Есть вопросы?

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Отправить