CSS3-button На GeniyZ.ru с недавних пор я начал тспользовать свои стилизованные кнопки. Но это не просто стилизованные кнопки — это особый вид их стилизации. Отличительная черта — отсутствие изображений, лишних элементов DOM и JavaScript, но наличие интересного объёма, округлых форм и приятных затенений.На изображении приведён пример кнопки в обычном(спокойном), наведённом и нажатом состояниях. Такое чудо человеческой мысли работает только в браузерах. Internet Explorer идёт боком, однако и у него не всё так плохо — во-первых никакой функционал не теряется и ссылки также приобритают вид кнопок, другое дело, что выглядит это несколько неуклюже и квадратно, во-вторых — можно дополнить каскадник микрософтовскими фильтрами и добиться такого-же результата для IE. Я этого не буду делать по идеалогическим причинам, но вообще такое возможно.
Выглядит, на мой взгляд, вполне симпатишно, а главное, ради чего и старался, — ссылки, которые ведут себя как кнопки, теперь и выглядят соответствующе.
Собственно, код:

.buttons *, .button, input[type="submit"], button {
display: inline-block;
background-color: #fff;
border: thin solid #eee;
border-right-color: #777;
border-bottom-color: #777;
text-decoration: none;
color: #000;
border-radius: .3em;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
box-shadow: inset #777 -.2em -.3em .2em -.1em, inset #eee .2em .3em .2em -.1em;
-moz-box-shadow: inset #777 -.2em -.3em .2em -.1em, inset #eee .2em .3em .2em -.1em;
-webkit-box-shadow: inset #777 -.2em -.3em .2em -.1em, inset #eee .2em .3em .2em -.1em;
margin: 0;
padding: 0;
cursor: pointer;
}
.buttons *:hover, .button:hover, input[type="submit"]:hover, button:hover {
background-color: #bbb;
border-color: #000;
color: #111;
box-shadow: inset #999 -.2em -.3em .2em -.1em, inset #fff .2em .3em .2em -.1em;
-moz-box-shadow: inset #777 -.2em -.3em .2em -.1em, inset #eee .2em .3em .2em -.1em;
-webkit-box-shadow: inset #777 -.2em -.3em .2em -.1em, inset #eee .2em .3em .2em -.1em;
}
.buttons *:active, .button:active, input[type="submit"]:active, button:active {
background-color: #999;
border-left-color: #ddd;
border-top-color: #ddd;
border-right-color: #555;
border-bottom-color: #555;
box-shadow: inset #555 -.2em -.3em .2em -.1em, inset #ddd .2em .3em .2em -.1em;
-moz-box-shadow: inset #555 -.2em -.3em .2em -.1em, inset #ddd .2em .3em .2em -.1em;
-webkit-box-shadow: inset #555 -.2em -.3em .2em -.1em, inset #ddd .2em .3em .2em -.1em;
}

Данный метод существует благодаря наличию такого замечательного свойства CSS3 box-shadow. Для браузеров основанных на Gecko используется префикс -moz, для WebKit — -webkit — ни чего особенного, скоро можно будет и без них обойтись. Округлость придаётся свойстом border-radius, который тоже не работает в IE, но мне на это всёравно. Не всёравно на Chrome, который рисуя тени не обращает внимание на круглые углы и получается в результате, мягко говоря, некрасиво =( — приходится рисовать углы с малым радиусом, дабы „торчащие углы от тени“ не сильно портили внешний вид. В целом — не плохо.
Вешаю я такой вид для всех сабмитов, кнопок и всего чему дал класс button или является дочерним элементом .buttons. Кому-то покажется неправильным, что курсор я перевожу для кнопок в режим „указателя“, но мне кажется, что лишний раз просигнализировать пользователю о возможности „нажать“ не повредит.
Я посчитал, что для GeniyZ.ru будет лучшим вариантом наличие белого фона, однако для большенства сайтов лучше фон сделать темнее. Тем не менее я подумываю о смене цветовой гаммы на бледно-серо-зелёные тона.
Надеюсь, что эта заметка будет полезной, спасибо за внимание =)Полина Ростова