Небольшая шпаргалка, как оформить кнопку в виде картинки. Вообще-то для этого есть <input type="image" />, но бывает, что код кнопки находится в недоступном для редактирования файле. И тогда в ход идёт ловкость рук и css.
Этот приём будет работать, если кнопка отличается от других элементов input:
- у неё есть свой класс или айди;
- у неё нет класса, общего для других полей формы;
- она находится в другом контейнере (в другом элементе или в элементе с особым классом или айди).
Если ни одно из этих условий не выполняется, средства css бессильны.
В нашем случае кнопка наделена классом but, а кнопку оформим вот такой ёлочкой: 
Пример кода с комментариями:
<form action="">
<fieldset>
<legend>Пример кнопки
<input type="text"/>
<input class="but" type="submit" value="Отправить" />
</fieldset>
</form>
<style type="text/css">
.but{
width:30px;/*Ширина картинки*/
height:21px;/*Высота картинки*/
padding:0 0 0 30px;
/*Выталкивает надпись с картинки в ИЕ*/
overflow:hidden;
/*Обрезает кнопку до указанных размеров*/
cursor:pointer;
border:none;
background:url('button.gif') no-repeat;
/*Положить картинку фоном*/
color:transparent;
/*Делает прозрачной надпись на кнопке в ФФ и Опере*/
}
fieldset{
padding:50px;
border:2px solid #3a5777;
}
</style>
Результат будет выглядеть так: Пример.
5 комментариев на «Графическое оформление кнопок»
Michael de`Oz (2 комментария)
Ещё лучше для этого использовать спрайты
Княгиня (662 комментария)
А чуть подробней об этом можно?
Алексей (2 комментария)
А еще можно кнопку сделать не просто картинкой, а чтобы она подсвечивалась при наведении, и становилась «вдавленной» при mousedown и снова обычной при mouseup. Естественно, надо делать спрайты. Но способ работает на 2/3 в IE7, потому что он не понимает метода «blur» (IE6 в расчет уже давно не беру 😛 ).
Княгиня (662 комментария)
Я обычно обхожусь ховерностью: кнопка просто «пружинит» при наведении, этого достаточно. Заказчики редко обращают внимание на такие мелочи, а без доп. оплаты я украшательством занимаюсь только для себя или по дружбе.
Алексей (2 комментария)
Ну в том-то и дело, что по дружбе делаю «шоб красиво» 🙂
Мой способ в том, что кнопка «подсвечивается» на :hover (смещаем спрайт на «подсвеченную» картинку), а при клике на нее смещаем спрайт на вдавленную картинку (псевдоэлемент «:focus»). Вот и всё. Но фишка в том, что, чтобы картинка после клика не осталась вдавленной (фокус-то всё ещё на ней), пишем на кнопке
onclick="this.blur();"и тогда кнопка вернется в исходное состояние. Вот здесь IE7 и заваливается.