CSS3 для начинающих. Часть 6.2. Кнопки в стиле BonBon

CSS3 для начинающихПосле продолжительного перерыва продолжим изучать CSS3. Сегодня речь пойдет о том как создать кнопки в стиле BonBon (конфетки такие вкусные) на CSS3. Кнопки будут разных размеров, цветов, форм и т.д. Но при всем этом они имеют достаточно минималистичный дизайн, что позволяет использовать их почти на всех сайтах. Напоминаю, что это статья из цикла CSS3 для начинающих. А примеры можно посмотреть на демо сайте http://css3demos.rusdigi.org.

Посмотреть демо   Скачать исходники

Разметка

Как оказалось самый простой и надежный способ для разметки таков:

Label

bonbon кнопка

А менять внешний вид мы будем добавлением дополнительных классов:

Label

bonbon кнопка

Иконки

Если вы хотите добавить иконку к кнопке, то можно использовать атрибут HTML5, к примеру data-icon="S". Такого рода атрибут позволить использовать любые символы Unicode либо использовать специальные шрифты Pictos или Writesocial. С разметкой CSS на подобии такой иконка появится вначале кнопки перед надписью:

.button:before { content: attr(data-icon); }

Вот полный вариант разметки для кнопки с иконкой:

Label

bonbon кнопка

Доступность

Добавив 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 из-за чего возникает ощущение, что мы смотрим сквозь кнопку и можем видеть содержимое.
bonbon кнопки
Глянцевый вариант создан с использованием :after элемента с градиентным фоном сверху кнопки. Чтобы не слиться с основной границей, размеры элемента уменьшены немного по ширине и наполовину по высоте. К сожалению, анимировать :after элемент не получается, поэтому этот эффект применим только для статичных кнопок. Для кнопок с изменяемыми границами он не подойдет. Стоит так же учесть тот момент, что если кнопка слишком длинная, то эффект выглядит не очень приятно.

Хотелось бы упомянуть еще несколько деталей. В элементе border используются светлые и темные box-shadows чтобы имитировать глубину и тени изменяются при клике на кнопку, чтобы эмитировать нажатие.

Заключение

К сожалению, все эти кнопки не кроссбраузерны. Если у вас есть желание — вы можете их доработать. На данный момент они будут работать в последних версиях Google Chrome, Safari, Mozilla Firefox. В первую очередь, данная статья рассчитана на изучение некоторых свойств CSS3 и HTML5 и предполагает, что вы, изучив данные нововведения, начнете их использовать с своей работе. Конечно, если вам нравятся данные кнопки вы можете их использовать в своих проектах.

Посмотреть демо   Скачать исходники

Источник http://lab.simurai.com/css/buttons/

 



Запись опубликована в рубрике CSS3 с метками , , , , . Добавьте в закладки постоянную ссылку.

5 комментариев: CSS3 для начинающих. Часть 6.2. Кнопки в стиле BonBon

  1. Уведомление: CSS3 для начинающих. Часть 6.2. Кнопки в стиле BonBon | Grabr

  2. Уведомление: CSS3 для начинающих | RusDigi.org Блог Гилязетдинова Руслана

  3. Slctemp говорит:

    To make it IE 9 compatible just add Modernizr from http://www.modernizr.com.

  4. Alexei говорит:

     Добавил блог в закладки, буду почитывать периодически.  У себя на блоге  тоже такие кнопочки сделал вверху синие

    • Гилязетдинов Руслан говорит:

      спасибо за добрые слова) заходите почаще) 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *