После продолжительного перерыва продолжим изучать CSS3. Сегодня речь пойдет о том как создать кнопки в стиле BonBon (конфетки такие вкусные) на CSS3. Кнопки будут разных размеров, цветов, форм и т.д. Но при всем этом они имеют достаточно минималистичный дизайн, что позволяет использовать их почти на всех сайтах. Напоминаю, что это статья из цикла CSS3 для начинающих. А примеры можно посмотреть на демо сайте http://css3demos.rusdigi.org.
Посмотреть демо Скачать исходники
Разметка
Как оказалось самый простой и надежный способ для разметки таков:
Label
А менять внешний вид мы будем добавлением дополнительных классов:
Label
Иконки
Если вы хотите добавить иконку к кнопке, то можно использовать атрибут HTML5, к примеру data-icon="S"
. Такого рода атрибут позволить использовать любые символы Unicode либо использовать специальные шрифты Pictos или Writesocial. С разметкой CSS на подобии такой иконка появится вначале кнопки перед надписью:
.button:before { content: attr(data-icon); }
Вот полный вариант разметки для кнопки с иконкой:
Label
Доступность
Добавив role="button"
, мы сможем управлять доступностью кнопки. Используйте tabindex
чтобы сделать кнопки подсвеченными или если вы используете тэг button
вы можете использовать атрибут disabled
.
Tab1
Tab2
Внешний вид
Самый главный плюс кнопок с использованием CSS — отсутствие изображений. Но мы используем картинку в png
формате, которая нужна для того чтобы создать эффект шума. Все остальное в оформлении кнопок это комбинация CSS3 свойств text-shadow, box-shadow, gradient
и border
. Все это способствует тому, что мы легко можем изменить форму и размер кнопки.
Свойство border-radius
необязательно всегда делать закругленным. Можно так же использовать свойство transition
для плавного изменения формы кнопки при наведении на нее. Вот такой код мы получим для различных состояний кнопки: стандартного вида, :hover
и :active
:
border-radius: 5em / 2em;
border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
border-radius: .3em;
Для задания цветов решено было использовать HSL модель задания цвета. Сделано это для того, чтобы можно было легко изменять цвет (в процентах) для получения различных теней и т.п. К примеру, цвет текста немного темнее чем фоновый цвет:
color: hsl(39, 100%, 30%);
background-color: hsl(39, 100%, 50%);
Так же мы поиграем с оформлением под различные материалы. Сделаем несколько версий: матовую, глянцевую и зеркальную. Отличие последних двух в том, что в зеркальной к тексту добавляется text-shadow
из-за чего возникает ощущение, что мы смотрим сквозь кнопку и можем видеть содержимое.
Глянцевый вариант создан с использованием :after
элемента с градиентным фоном сверху кнопки. Чтобы не слиться с основной границей, размеры элемента уменьшены немного по ширине и наполовину по высоте. К сожалению, анимировать :after
элемент не получается, поэтому этот эффект применим только для статичных кнопок. Для кнопок с изменяемыми границами он не подойдет. Стоит так же учесть тот момент, что если кнопка слишком длинная, то эффект выглядит не очень приятно.
Хотелось бы упомянуть еще несколько деталей. В элементе border
используются светлые и темные box-shadows
чтобы имитировать глубину и тени изменяются при клике на кнопку, чтобы эмитировать нажатие.
Заключение
К сожалению, все эти кнопки не кроссбраузерны. Если у вас есть желание — вы можете их доработать. На данный момент они будут работать в последних версиях Google Chrome, Safari, Mozilla Firefox. В первую очередь, данная статья рассчитана на изучение некоторых свойств CSS3 и HTML5 и предполагает, что вы, изучив данные нововведения, начнете их использовать с своей работе. Конечно, если вам нравятся данные кнопки вы можете их использовать в своих проектах.
Посмотреть демо Скачать исходники
Источник http://lab.simurai.com/css/buttons/
To make it IE 9 compatible just add Modernizr from http://www.modernizr.com.
Добавил блог в закладки, буду почитывать периодически. У себя на блоге тоже такие кнопочки сделал вверху синие
спасибо за добрые слова) заходите почаще)