Кнопки CSS. Делаем красивые кнопки с картинками

Здравствуйте, уважаемые посетители блога о заработке в интернете и разных технических приемах создания сайтов. Сегодня поговорим о том, как сделать красивые кнопки при помощи CSS. Но делать это мы будем не на чистом CSS коде, как в предыдущей записи делали Горизонтальное CSS меню, а будем подключать изображение кнопок, которое предварительно нужно подготовить. Но для начала я объясню, какую кнопку мы будем делать. Наша будущая кнопка будет реагировать на наведение курсора мыши, менять цвет. У кнопки будет эффект тени. Также она будет реагировать на нажатие. Появится ощущение, что она продавливается немного внутрь, тем самым создается эффект объемности.

Давайте начнем с создания кнопки. Открываем фотошоп. Нам надо нарисовать одну кнопку в трех вариантах. Нажимаем Ctrl + N (Файл — Создать). Размер документа можно задать Web, фон прозрачный. Это пока не имеет значения. И рисовать тоже будем на глаз, хотя, для точности можно воспользоваться линейкой Ctrl + R. Чтобы было лучше видно, что мы делаем, можно немного увеличить созданный документ нажав пару раз сочетание клавиш Ctrl +. Теперь выбираем инструмент Прямоугольник с закругленными краями U и в верхней части документа рисуем фигуру, оставляя небольшой отступ по краям. Применяем к этой фигуре стили слоя. Я применил определенные стили + добавил немного тени снизу. Затем копируем эту фигуру Ctrl + J и перемещаем вниз сразу за первой. У второй фигуры можно снизить прозрачность до 80% и слегка убрать тень. Сделать еще одну копию слоя и переместить ее вниз после второй. Применить внутреннюю тень черного цвета и внутреннее свечение тоже черного, а внешнюю тень убрать. Чтобы получился эффект вдавленности. Теперь идем в Изображение — Тримминг и нажимаем ОК, тем самым отсекая ненужные пустые части документа. Смысл в том, что надо сделать так, чтобы каждая фигура отличалась друг от друга. Можно также написать какой-нибудь текст на кнопке. У меня получилось вот так:

Затем в файл style.css нужно написать следующий код: (Для практики можно создать отдельные файлы в редакторе и экспериментировать)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.but
{
background:url(1.png);
width: 150px; 
height: 40px;
display: inline-block;
}
.but:hover
{
background:url(1.png)0 81px;
}
.but:active
{
background:url(1.png)0 38px;
}

Ну и на странице, где нам необходимо вставить кнопку вставляем следующую конструкцию кода:

1

<a href="#" class="but"></a>

Вы также можете посмотреть демонстрационные варианты кнопок и скачать их исходники.

ДЕМО ДЕМОСКАЧАТЬ