Медная поляна

Пока это всего лишь забава, поскольку лицезреть кнопку in corpore* согласно задуманному позволяют лишь Firefox 3.5+ (3-й с некоторыми ограничениями), Google Chrome 1+ и Safari 3+. Ждем Opera, ослики пенсионного возраста пусть отправляются в преисподнюю.

Внешний вид кнопки

Покликать можно в примере. Разберем код:

HTML:

<a  href="#" class="button">Кликни меня!<span></span></a>

CSS ("гламурность" кнопке придают свойства css3; спасибо им за это):

a.button, a.button:visited {
    position: relative; padding: 2px 6px 2px; border-bottom: 1px solid rgba(0,0,0,0.25);
    text-decoration: none; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); /*эффект небольшой "вдавленности" надписи на кнопке*/
    color: #fff; background: #4169e1;
    cursor: pointer; font-weight: bold;
    -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; /*задает для кнопки скругление уголков*/
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.5); /*заставляет кнопку отбрасывать тень*/
}
a.button:hover {
    background: #395cc5; /*при наведении курсора кнопка меняет цвет*/
}
a.button:active {
    top: 1px; /*по клику кнопка чуть смещается вниз*/
}
a.button span {
    position: absolute; top: 0; left: 0; width: 100%; height: 13px; 
    -moz-opacity: 0.2; -webkit-opacity: 0.2; opacity:0.2; /*необходимая прозрачность для реализации градиента*/
    border-bottom: 1px solid rgba(65,105,225,0.4); /*смягчает контраст цветового перехода между верхней и нижней частями кнопки*/
    background: #fff;
}

Не слишком заметный (но придающий лоск) градиент на кнопке достигается путем добавления пустого <span></span> внутрь ссылки и сочетанием у них относительного и абсолютного позиционирования с заданием необходимой прозрачности. Кстати, Огнелис 3.5 научился поддерживать свойство opacity без приставки -moz-.

Внимательный читатель заметит, что цвет в некоторых случаях устанавливается с помощью модели RGBa. Вещь новая, но насколько я понял, несильно отличается от RGB. Разница в том, что последним, четвертым числом задается степень прозрачности в диапазоне от 0 до 1. А озвученное ограничение для Firefox 3 заключается в непонимании свойства -moz-box-shadow.

Скачать пример c комментариями: cssbutton.zip 123

4 комментария

Аноним

В IE8 выглядет ужасно.

перечитываем первый абзац.

В примере очепятка в ссылке на статью.

beautiful-button-ccs-only

Была когда-то. поправил.