BonBon

Sweet CSS3 Buttons

Мой twitter

Вот такие вот отличные кнопки

Но прежде, чем использовать их на своих сайтах, нужно знать о недостатках. И эти недостатки заключаются в том, что такие кнопки не будут работать в старых браузерах. Это самый большой недостаток и по-моему он единственный.

Markup

Хорошо, что можно использовать на странице минимум разметки. Выглядит это следующим образом: <a href="" class="button">Label</a> Label

Вы можете изменить внешний вид за счет добавления новых классов: <a href="" class="button orange glossy">Label</a> Label

Icons

Если вы хотите добавить иконку, вы можете использовать HTML5 пользовательских атрибутов данных следующим образом: data-icon="S". Это позволяет использовать символы Unicode или значок шрифты, такие как Pictos или многое другое. Такие классы .button:before { content: attr(data-icon); } будут добавлять иконку в начале кнопки. <a href="" class="button orange glossy" data-icon="✈">Label</a> Label

Accessibility

role="button" Можно использовать и такие классы, чтобы кнопка была не активной.. <a href="" role="button" tabindex="1" class="button pink">Tab1</a>
<a href="" role="button" tabindex="2" class="button pink">Tab2</a>
<button disabled class="button pink glossy">Disabled</button>
Tab1 Tab2

Looks

Я старался изо всех сил, чтобы в этих кнопках не использовать изображения и в последний момент не удержался и добавил картинку с шумом на background кнопок. По-моему так гораздо лучше:
Morph

Знайте, что углвы у кнопок могут быть закруглены не все. Вы можете использовать это по своему усмотрению: border-radius: 5em / 2em;
border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
border-radius: .3em;

Используются 2HSL цвета. Это позволяет делать различные оттенки и изменять их в процентном соотношении: color: hsl(39, 100%, 30%);
background-color: hsl(39, 100%, 50%);

Я пытался сымтировать стекло и отчасти у меня это получилось:
Eject Eject Eject

Здесь глянцевая кнопка и плюс на ней можно писать символы. Но я не понял как здесь использовать анимацию, поэтому оставил, как есть:
Type here!

Flexibility

Здесь использованы еще дополнительные CSS классы:
Queen Rain

Note

Это всего лишь демо версия кнопок. И необязательно их использовать на своих сайта. Желательно кнопки подбирать под ваш дизайн. И помните, что пока не все браузеры поддерживают спецификации CS3 и HTML5.