Привет, всем!

:before

Пытливость ума (да и не только) заставляет искать новые и лучшее решения в том или ином направлении. Это и привело меня на страницы блога некого @simurai. Возможно, кто-то уже знаком с наработками товарища «Самурая», с остальными же хочу просто поделиться интересными идеями псевдо-японского гуру. В этой статье хочу рассмотреть один из его проектов: BonBon — Sweet CSS3 Buttons (по желанию читателей, другие работы автора будут преданы вниманию в последующих статьях). Начальная цель: создание CSS-кнопок, которые приятно смотрятся, имеют гибкую настройку, и в это же время будут иметь максимально простую разметку.

Разметка:

Автор старался вложить в идею максимальную простоту в использовании, без «многабукав»; элементарный пример финальной реализации (Demo):

<a href="#" class="button">Label</a> 

Также Вы можете изменить внешний вид за счет добавления к кнопке парочки классов, например: оранжевую окраску и глянцевый блеск (Demo):

<a href="#" class="button orange glossy">Label</a> 

Иконки:

Если вы хотите добавить иконку, для большей ассоциативности веб-элемента, вы можете использовать HTML5-атрибут, наподобие этого: data-icon=«S». Это позволяет использовать Unicode-символы, иконочные шрифты и многие др.

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

Данный CSS-код добавляет иконку перед содержимым кнопки, что позволяет сохранить семантическую разметку и изменять иконки, без редактирования CSS-стилей (Demo):

<a href="" class="button orange glossy" data-icon="✈"> Label</ a> 

Доступность:

Если добавить к нашим кнопкам атрибут role=”button” и использовать TabIndex, мы можем делать их активными и выделять поочередно. Или же — если вы используете тег , вы можете применять атрибут «disabled» для блокирования кнопки от нажатий (Demo).

Внешний вид:

Автор пытался избежать использования каких-либо изображений при верстке, но как он сам пишет — «не удержался» и добавил PNG-картинку — для шума. Остальное же все — представляет собой сочетание элементов CSS3: text-shadows, box-shadows, gradients и borders. Это позволяет легко изменять размеры кнопок, сохраняя их начальный вид, пропорции и четкость, при этом не теряя возможности изменять их форму: morphing (Demo).

Border-radius – не всегда должен быть круглым, мы его может выгнуть в более овальную форму, используя дополнительный набор точек, прописывая его через "/"

border-radius: 5em / 2em; border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; 

Я пытался имитировать различные материалы: "матовые", "глянцевые" и "стекло". Результаты вы можете оценить сами (Demo):

Глянцевая форма создается с помощью селектора :after с градиентом фона на вершине

Ради фокуса, можно попробовать применить HTML5-атрибут contenteditable=«true», в результате чего получаем забавную редактируемую кнопку (Demo):

Гибкость:

Все выше описанные эксперименты, можно представить в виде такого вот «мануального» списка (здесь все дополнительные имена классов, с которыми вы можете поиграть самостоятельно, использую Firebug или другую оснастку):

• Color: orange, pink, blue, green, transparent
• Font: serif
• Material: glossy, glass
• Size: xs, xl
• Shape: round, oval, brackets, skew, back, knife, shield, drop, morph
• Icon only: icon
• Disabled: disabled

:after

Данный материал — это всего лишь демо-версия, которая не предназначена для использования на рабочих проектах. Не все браузеры поддерживают данное решение. Целью разработки было — показать пару методов по использованию некоторые из новых функций CSS3/HTML5

© simurai

Demo: lab.simurai.com/buttons/
Author: simurai.com
Source: github.com/simurai

Как итог предлагаю обсудить концепт в принципе: предложения по улучшению, замечания по недостаткам, конструктивная критика (без «а чем bootstrap не угодил ….»).

Также, прошу голосовать… Спасибо.