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

Пока это всего лишь забава, поскольку лицезреть кнопку 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; /*задает для кнопки скругление уголков*/
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); -moz-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; 
opacity:0.2; -moz-opacity:0.2; -webkit-opacity:0.2; /*необходимая прозрачность для реализации градиента*/
border-bottom:1px solid rgba(65,105,225,0.4); /*смягчает контраст цветового перехода между верхней и нижней частями кнопки*/
background:#fff;
}

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

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

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