Красивые градиентные кнопки на CSS3 для всех браузеров

Вчера мы рассматривали кнопки css как сделать красивые 3D кнопки при помощи CSS. Сегодня я Вам поведаю как еще можно сделать красивые градиентные кнопки и что бы отображались в разных браузерах  .  Для создания кнопок мы будет пользоваться свойства: border-radius, text-shadow,box-shadow и RGBA цвета.  Разметка и стили сделаны с использованием  graceful degradation, так что браузеры не поддерживающие указанные технологии, отобразят кнопки в рабочем нормальном виде, но не в таком хорошем качестве.

Кнопки будут иметь три состояния (обычное, наведение и нажатие), с  ними можно манипулировать и изменять свойства.

В этой статье вы увидите, как можно создать градиентные кнопки только с CSS (без изображения) .

HTML

Рассмотрим HTML для, например, синей кнопки:
[crayon lang=’html’]

Button
[/crayon]
Вложенный <span> используется для добавления текстуры и верхней белой границы

Верхнюю границу можно  сделать и с помощью inset box-shadow, но при этом кнопки не подходили бы под  graceful degradation. Ниже мы увидим  разницу.

CSS

С начала  сделаем общий стиль для всех кнопок  (класс button) :
[crayon lang=’css’].button
{
margin: 10px;
text-decoration: none;
font: bold 1.5em ‘Trebuchet MS’,Arial, Helvetica; /* Изменяйте em для масштабирования кнопки */
display: inline-block;
text-align: center;
color: #fff;

border: 1px solid #9c9c9c; /* Запасной стиль */
border: 1px solid rgba(0, 0, 0, 0.3);

text-shadow: 0 1px 0 rgba(0,0,0,0.4);

box-shadow: 0 0 .05em rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

}

.button, .button span
{
-moz-border-radius: .3em;
border-radius: .3em;
}

.button span
{
border-top: 1px solid #fff; /* Запасной стиль */
border-top: 1px solid rgba(255, 255, 255, 0.5);
display: block;
padding: 0.5em 2.5em;

/* Фоновый паттерн */

background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
-moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

/* Настройки паттерна */

-moz-background-size: 3px 3px;
-webkit-background-size: 3px 3px;
background-size: 3px 3px;
}

.button:hover
{
box-shadow: 0 0 .1em rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
}

.button:active
{
/* Опускаем на 1px при нажатии */
position: relative;
top: 1px;
}[/crayon]

Теперь давайте рассмотрим стили  отдельной кнопки на примере синей кнопки:
[crayon lang=’css’] .button-blue
{
background: #4477a1;
background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#81a8cb’, endColorstr=’#4477a1′);
}

.button-blue:hover
{
background: #81a8cb;
background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#4477a1′, endColorstr=’#81a8cb’);
}

.button-blue:active
{
background: #4477a1;
}[/crayon]

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

Поддержка браузерами

Mozilla Firefox 3.6+

Полная поддержка всех свойств, в том числе и паттернов:

Webkit (Safari, Chrome)

Все отлично, так же поддерживаются все свойства:

Opera 11

К сожалению, в Опере нет поддержки градиентов CSS и паттернов, но и при этом все остальное работает и кнопки смотрятся хорошо:

IE 6–8

С помощью фильтров можно добавить градиенты к кнопкам:

IE 9

Этот браузер поддерживает градиенты и тени, но с закругленными углами у него не все хорошо:

Вот и все

Я надеюсь, Вам понравилась эта статья, не забывайте оставлять комментарии и следить за новыми постами!
[spoiler name=”Примеры кнопок”]

[/spoiler]