В этом уроке мы покажем, как использовать работающее во всех браузерах свойство градиентов CSS. Посмотрите пример, чтобы увидеть набор градиентных кнопок, созданный с использованием чистого CSS, без изображений или Javascript. Кнопки меняют размер, в зависимости от размера шрифта. Размер кнопок также можно изменять, меняя значения внутреннего отступа и размера шрифта. И этот способ может быть применен к любому элементу HTML, такому как блок, тег span, текст, ссылка, кнопка, поле ввода и т. п.

Демонстрация работы

Что особенного в этих кнопках?

• Чистый CSS: не используются изображения или Javascript.
• Градиент поддерживается большинством браузеров, включая старые версии: Internet Explorer, Firefox от версии 3.6, Chrome и Safari.
• Гибкость и масштабируемость: размер кнопки и закругление углов можно поменять, изменяя значение размера шрифта и внешних отступов.
• Есть три состояния кнопок: обычное, при наведении указателя мыши и активное.
• Может применяться к любому элементу HTML: ссылке, полю ввода, кнопке, тегу span, блоку, тексту, тегу h3 и т. п.
• Обходной путь: если CSS3 не поддерживается, будет показана простая кнопка, без градиентов и теней.

Предварительный просмотр 

Изображение ниже показывает, как будет выглядеть кнопка в разных браузерах.

Состояния кнопки

• Обычное состояние — градиент с границей и стилями теней.
• При наведении указателя мыши — более темный градиент.
• Активное — градиент перевернут, кнопка сдвинута на 1px вниз и также более темный шрифт.

Общие стили кнопки 

Следующий код — общие стили для класса .button. Мы использовали единицы em для значений свойств внутреннего отступа и скругления границы, чтобы кнопка меняла размер при изменении размера шрифта. Чтобы изменить закругление углов и размер кнопки, просто измените значение свойств border-radius, font-size и padding. Например, мы можем сделать маленькую кнопку, уменьшив размер шрифта и значение внутреннего отступа, посмотрите пример.

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

Стили цветового градиента 

Код ниже — это стили CSS для оранжевой кнопки. Первая строка, содержащая свойство фона, — это обходной путь для браузеров, не поддерживающих CSS3, вторая строка — для браузеров на движке Webkit, третья — для браузера Firefox и последняя — фильтр градиента для браузера Internet Explorer.

.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Как можно использовать эти кнопки?

Допустим, вам понравилась синяя кнопка, и вы хотели бы использовать ее в своем проекте. Для этого вам нужно:

• Сначала скопировать свойства CSS для классов .button и .blue из примера исходного кода.
• После этого добавить к элементу HTML, который вы хотите сделать кнопкой, например, <a href="#">Button</a>. Классы CSS могут быть применены к любым элементам, таким как ссылка, текст, тег span, блок, поле ввода, кнопка и т.д. 

Автор урока Nick La

Перевод — Дежурка

Смотрите также:

• Создание интересной кнопки с использованием CSS3
• Создание отличного способа отображения значков социальных сетей
• Создаем стильную кнопку, используя только CSS3