Софкейз

Я уже показывал пример как стилизировать текстовое поле используя CSS3, сегодня я хочу рассказать как создавать красивые кнопки используя CSS3. В примере я буду использовать свойства text-shadow, box-shadow, gradient и border-radius. К сожалению градиент поддерживается в данный момент только в Google Chrome, Safari и Firefox.

И так начнем, делаем для кнопки закругленные углы, тень для текста и самой кнопки, а также сам градиент.

.button
{
	border: 1px solid #3366cc;
	border-radius: 3px;
	padding: 5px 15px;
	background: -webkit-gradient(linear, left bottom, left top,
		color-stop(0, #3399cc), color-stop(1, #3399ff));
	background: -moz-linear-gradient(bottom, #3399cc, #3399ff);
	color: #fff;
	text-shadow: 1px 1px 0px #069;
	font-size: 13px;
	font-family: Tahoma;
	cursor: pointer;
	box-shadow: 0px 0px 6px #99ccff;
}

После этого делаем для кнопки ховер, для наглядности и что бы она действительно была кнопкой, а не казалась статическим элементом.

.button:hover
{
	background: -webkit-gradient(linear, left bottom, left top,
		color-stop(0, #0066cc), color-stop(1, #3399cc));
	border: 1px solid #006699;
}

Теперь смотрим на результат, вышло красиво, правда? Но это не все, а вдруг кнопка будет отключена, и тогда стили активной кнопки останутся и на не активной. Теперь определяем стили для не активной кнопки.

.button[disabled=disabled]
{
	background: -webkit-gradient(linear, left bottom, left top,
		color-stop(0, #CCC), color-stop(1, #DDD));
	background: -moz-linear-gradient(bottom, #CCC, #DDD);
	border: 1px solid #BBB;
	text-shadow: 1px 1px 0px #DDD;
	color: #999;
	cursor: default;
	box-shadow: 0px 0px 6px #BBB;
}
.button[disabled=disabled]:hover
{
	background: -webkit-gradient(linear, left bottom, left top,
 		color-stop(0, #CCC), color-stop(1, #DDD));
	background: -moz-linear-gradient(bottom, #CCC, #DDD);
	border: 1px solid #BBB;
}

Ну вот на этом все. Еще раз напомню, что данный пример отлично выглядит только в Google Chrome, Safari и Mozilla Firefox, так как только они на данный момент поддерживают градиенты, но можно вместо них ставить картинки градиентами, тогда и в остальных браузерах будет нормально отображаться, за исключением ослика :)