Вот такие вот отличные кнопки
Но прежде, чем использовать их на своих сайтах, нужно знать о недостатках. И эти недостатки заключаются в том, что такие кнопки не будут работать в старых браузерах. Это самый большой недостаток и по-моему он единственный.
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>
Tab1
Tab2
<a href="" role="button" tabindex="2" class="button pink">Tab2</a>
<button disabled class="button pink glossy">Disabled</button>
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
- 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
Note
Это всего лишь демо версия кнопок. И необязательно их использовать на своих сайта. Желательно кнопки подбирать под ваш дизайн. И помните, что пока не все браузеры поддерживают спецификации CS3 и HTML5.