Создаем кнопку с помошью CSS3

Существует огромное количество уроков по созданию красивых кнопок с помощью CSS. Как правило, вам сначала непременно надо изобразить ее в Photoshop, затем заверстать, используя изображение и какую-нибудь незамысловатую технику и, чтобы все стало совершенно неотразимым, добавить немного Javascript. Но теперь у нас есть CSS3, который на сегодняшний день поддерживается большинством браузеров и позволяет намного усовершенствовать и упростить данный процесс.

Посмотрим, как же на практике реализуются возможности CSS3. Создадим простую, но элегантную кнопку.

Она обладает следующими преимуществами:

-Уменьшение размера файла и скорости загрузки страницы; -Возможность использовать ее столько раз, сколько потребуется без значительных дополнительных изменений (т.е. вы сможете добавить кнопку в вашу библиотеку и использовать ее в различных проектах); -Автоматическая адаптация ширины кнопку в соответствии с длиной текста.

Итак, начнем.

РАЗМЕТКА

Для начала создадим собственно файл HTML, содержащий нашу кнопку:

<button>Обыкновенная кнопка</button>

Так выглядит кнопка по умолчанию:

ОСНОВНЫЕ СТИЛИ

Создадим файл style.css и зададим несколько базовых стилей:

button {
	color:#08233e;
	font:39px Futura, ‘Century Gothic’, AppleGothic, sans-serif;
	padding:14px;
}

В них нет ничего сверхъестественного и на данном этапе внешний вид кнопки таков:

БЭКГРАУНД

Добавим фон (Помните, что мы хотим иметь возможность использовать эту кнопку столько раз, сколько нам понадобиться, в том числе и для разных проектов):

1. Открываем Photoshop и создаем новый файл размером 10px x 100px
2. Выделяем верхнюю половину файла и создаем на новом слое прямоугольник белого цвета
3. Задаем для фона прозрачность 30%
4. Сохраняем наше изображение как overlay.png

Выберите цвет для вашей кнопки и задайте его вместе с созданным только что оверлеем.

background:url(overlay.png) repeat-x center #ffcc00;

Получаем кнопку красивого желтого цвета с приятным эффектом.

БОРДЕР

Теперь избавимся от отвратительного бордера, предложенного нам по умолчанию.

border:1px solid #ffcc00;

СКРУГЛЕННЫЕ КРАЯ

Придадим кнопке более приятный и не такой угрожающий вид скруглением краев. Здесь, без дополнительный хитростей, в выгодном положении будут пользователи браузеров Webkit и Mozilla, в то время как любители IE будут довольствоваться прямыми углами.

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

Казалось бы, уже неплохо. Но не будем останавливаться на достигнутым и уделим внимание деталям.

СОВЕРШЕНСТВО НА УРОВНЕ ПИКСЕЛЕЙ

Добавим бордер в 1 px и такого же размера внутреннюю тень. Здесь нам пригодятся цвета палитры RGBa. (используем прозрачность 50%)

border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);

ДЕЛАЕМ ЕЕ РАБОЧЕЙ

Чтобы у пользователей не возникало сомнений, что это действительно кнопка и она рабочая, добавим курсор, который будет, появляется при наведении:

cursor:pointer;

ОВЕРЛЕЙ

Как же будет выглядеть наша кнопка при наведении? Здесь мы снова используем RGBa.

background-color:rgba(255,204,0,1);

Так мы визуально ничего не изменим. Добавим еще одну строчку.

button:hover {
	background-color:rgba(255,204,0,0.8);
}

Теперь при наведении мы получим немного другой оттенок, и пользователи будут знать, что кнопка активна.

ПОЛНЫЙ КОД

button {
	color:#08233e;
	font:39px Futura, ‘Century Gothic’, AppleGothic, sans-serif;
	padding:14px;
	background:url(overlay.png) repeat-x center #ffcc00;
	background-color:rgba(255,204,0,1);
	border:1px solid #ffcc00;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border-bottom:1px solid #9f9f9f;
	-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	cursor:pointer;
}
button:hover {
	background-color:rgba(255,204,0,0.8);
}
button:active{
	position:relative;top:2px;
}

Вот и все! Как видите сделать красивую кнопку в CSS довольно просто.