Кнопки / css

Создание кнопок на основе тегов а и нескольких стилей.

Такой метод позволяет делать кнопки и все операции над ними доступным тегу <a>

Для воспроизведения, потребуется пара картинок и данный код:
Это в html
1 Typical sliding doors button

Это в css
01 a {
02 background: transparent url(‘button_right.png’) no-repeat scroll top right;
03 display: block;
04 float: left;
05 /* padding, margins and other styles here */
06 }
07 a span {
08 background: transparent url(‘button_left.png’) no-repeat;
09 display: block;
10 /* padding, margins and other styles here */
11 }

CSS позволяет использовать спрайтовую технику. Одно изображение содержит графику для всех положений кнопки. Используя свойство background-position мы показываем точное изображение ня кнопке.

Данный пример использует вертикальное позиционирования изображения. Код css получается таким:

1 a {
2 background: white url(buttons.png) 0px 0px no-repeat;
3 }
4 a:hover {
5 background-position: -30px 0px;
6 }
7 a:active {
8 background-position: -60px 0px;
9 }