картинка кнопка в html

<a href="#" title="Label" class="button black">Label</a>

<a href="#" title="Label" class="button white">Label</a>

<a href="#" title="Label" class="button green">Label</a>

Сам HTML код элементарен:

.button.green:hover { background-position:0 -350px } /* активная зеленая кнопка */

.button.green { background-position:0 0 } /* зеленая кнопка */

background-image:url('images/buttons.png');

Теперь нам остается лишь слегка подправить CSS для таких кнопок:

Самый простой вариант – у нас все кнопки одного размера и одного/двух цветов, соответственно готовим небольшой “ ” на все случаи жизни (простым копированием слоя с кнопкой):

Простая CSS кнопка

Ну вот – кнопочка и готова, приступим к следующему шагу…

Если мы сделаем цветной фон:

Результат с залитой границей:

Теперь не мешало бы и залить кнопочку градиентом (сверху указан параметр opacity, внизу цвет; инструмент “Gradient Overlay” из “Blending Options”):

Границу выводим с помощью “Stroke” (из “Blending Options”), тип – градиент – от #000000 до #676767:

Ширина объекта в данном примере 320px – т.е. я предполагаю, что кнопок большего размера не будет.

Для этого лучше всего нам подойдет инструмент “Rounded Rectangle Tool” в Photoshop, с него и начнем – нарисуем нечто вроде:

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

Решил я начать новую серию статей – “CSS для начинающих”, надеюсь, будет полезно многим. Первый урок будет посвящен кнопкам…

CSS для начинающих. CSS кнопки это просто