Вчера мы рассматривали кнопки 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]