Модная кнопка с использованием только css3

На создание такой кнопки средствами css3 меня всподвигнула вот эта статья

Только там реализовано с помощью графики и немножко css3, а я решил сделать полностью на css3
Что я делал, я буду писать поэтапно

Этап 1. Прописываем основные стили

Для начала пропишем обычные свойства кнопки, такие как размер, цвет текста и шрифт. Ну и не забываем создать саму кнопку

<input type="button" value="Test" class="but" onfocus="blur();" />

onfocus=”blur();” нужно прописать для того, чтобы при нажатии на кнопку не было границы в виде точек

.but {
	width: 100px;
	height: 36px;
	color: #262626;
	font-weight: bold;
}

На текущем этапе наша кнопка выглядит вот так

Этап 2. Тень у текста и градиент

Теперь добавим в стили следующий код

.but {
	width: 100px;
	height: 36px;
	color: #262626;
	font-weight: bold;
	text-shadow: 0 1px 0 #ddd;
	background: #ededed;
	background: -moz-linear-gradient(top, #ededed, #afafaf);
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #afafaf),color-stop(1, #ededed));
}

Теперь у нас уже более оформленная кнопочка, но все равно чего-то не хватает. А не хватает границы и ее закругления

Этап 3. Создание закругленных углов и тени

На этом этапе мы пропишем границу кнопки, закруглим ее, а также зададим кнопке небольшую тень, чтобы она выглядела живее

.but {
	width: 100px; /* ширина кнопки */
	height: 36px; /* высота кнопки */
	color: #262626; /* цвет текста */
	font-weight: bold; /* делаем текст жирным */
	text-shadow: 0 1px 0 #ddd; /* тень у текста */
	background: #ededed; /* цвет фона кнопки */
	background: -moz-linear-gradient(top, #ededed, #afafaf); /* градиент для FF */
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #afafaf),color-stop(1, #ededed)); /* градиент для Safari и Chrome */
	border: 1px solid #5c5c5c; /* граница кнопки в 1 пиксель */
	-moz-border-radius: 3px; /* закругление в 3 пикселя для FF */
	-webkit-border-radius: 3px; /* закругление в 3 пикселя для Safari и Chrome */
	border-radius: 3px; /* закругление в 3 пикселя для браузеров понимающих это свойство css3 */
	-moz-box-shadow: 0 0 1px #eee; /* тень у кнопки в FF */
	-webkit-box-shadow: 0 0 1px #eee; /* тень у кнопки в Safari и Chrome */
	box-shadow: 0 0 1px #eee; /* тень у кнопки в браузерах понимающих это свойство */
	cursor: pointer; /* чтобы курсор был рукой при наводе */
}

Вот и все, кнопка готова. Выглядит она так

Но что нам просто кнопка? Давайте пропишем ей вид при наводе курсора и при клике на нее (кнопку)

Этап 4. Прописываем стили при наводе курсора

Для того, чтобы задать стиль при наводе курсора мы будем использовать псевдокласс :hover.
итак, пишем в стили

.but:hover {
	background: #f5f5f5;
	background: -moz-linear-gradient(top, #f5f5f5, #b9b9b9);
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #b9b9b9),color-stop(1, #f5f5f5));
}

Да, достаточно задать только новый цвет фона и градиента. Все остальные стили будут наследоваться от родителя (у нас это класс .but)

Этап 5. Прописываем стили при нажатии на кнопку

Для того, чтобы прописать стили при нажатии на кнопку мы будем использовать псевдокласс :active
Пишем в стили

.but:active {
	background: #8d8d8d;
	background: -moz-linear-gradient(top, #8d8d8d, #c9c9c9);
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c9c9c9),color-stop(1, #8d8d8d));
}

И опять же достаточно прописать только новый цвет фона и градиента

Потестить кнопку можно чуть ниже