CSS кнопка (кроссбраузерная)

В этот раз речь пойдет о том как заменить стандартные кнопки браузера своими собственными. При этом главная цель сохранить их функциональность и одинаковую отрисовку во всех браузерах.

Я нарисовал свою собственную кнопку которая напоминает стиль Windows Vista Button:

Для того чтобы сверстать такую кнопку я использую следующую конструкцию:

<a class="button" href="#">
<img class="head" src="blank.png" /><input type="submit" value="Button"/><img class="tail" src="blank.png" />
</a>

Я не зря обрамил три элемента именно в тег <A>. IE6 понимает псевдокласс hover только для этого элемента, поэтому если в дальнейшем мы захотим чтобы кнопка изменяла свой вид при наведении на нее мышкой - это будет какраз кстати. Также учтите, что все элементы являются инлайновыми(inline) и любой пробел или перенос строки между ними приведет к возникновению пустого пространства, а нам этого не надо. Поэтому сохраните форматирование именно так (все 3 внутренних элемента в одной строке).

И так, как Вы уже заметили, кнопка состоит их трех основных элементов: элемент img который выполняет роль левой части, элемент img - правая часть и input, который будет растягиваться посредине. Для верстки нам понадобятся 3 составные картинки этой кнопки. Вырежьте их в каком-то графическом редакторе типа Photoshop или GIMP. У Вас должно получиться следующее:

     

ВАЖНО! Дополнительно вырежьте картинку размером 1x1 пикселя полностью прозрачного фона. Об этом чуть дальше.

Настало время для самой верстки:

.button { text-decoration:none; }
    .button * {
        border:0;
        height:37px;
        cursor:pointer;
        vertical-align:middle;
    }

    .button img.head {
        background:url("button-left.png") no-repeat;
        width:7px;
    }

    .button img.tail {
        background:url("button-right.png") no-repeat;
        width:7px;
    }

    .button input {
        background:url("button-bg.png") repeat-x;
        color:#eee;
        width:100px;
        padding-bottom:2px;
        font-size:15px;
    }

Подробно рассмотрим каждый селектор:

.button * задает каждому элементу высоту в 37 пикселей, убирает бордер и устанавливает курсор в виде руки(это по желанию).

Далее опишем два класса head и tail. Установите на бекграунд заведомо вырезанные рисунки. Я устанавливаю их с помощью CSS опять же для hover'a. Теперь, как и обещал, вернемся к нашей прозрачной однопиксельной картинке. В этом примере я назвал ее blank.png и поставил ее на оба тега img. Это нужно сделать так как картинка без указанного атрибута src вовсе не будет отрисовываться.

Наконец устанавливаем CSS свойства для нашей кнопки. Ставим фоновый рисунок и растягиваем его по горизонтали. Задаем cерый цвет шрифта, верхний паддинг чтобы центрировать текст по вертикали и размер фонта 15 пикселей.

Ну вот и все. Кроссбраузерная CSS кнопка готова.

Если захотите установить hover, достаточно добавить всего 3 коротких селектора:

.button:hover .head { background:url("button-left-hover.png") no-repeat;}
.button:hover input { background:url("button-bg-hover.png") repeat-x; }
.button:hover .tail { background:url("button-right-hover.png") no-repeat;}