Небольшая шпаргалка, как оформить кнопку в виде картинки. Вообще-то для этого есть <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 комментария)
Ещё лучше для этого использовать спрайты
Княгиня (660 комментариев)
А чуть подробней об этом можно?
Алексей (2 комментария)
А еще можно кнопку сделать не просто картинкой, а чтобы она подсвечивалась при наведении, и становилась «вдавленной» при mousedown и снова обычной при mouseup. Естественно, надо делать спрайты. Но способ работает на 2/3 в IE7, потому что он не понимает метода «blur» (IE6 в расчет уже давно не беру ).
Княгиня (660 комментариев)
Я обычно обхожусь ховерностью: кнопка просто «пружинит» при наведении, этого достаточно. Заказчики редко обращают внимание на такие мелочи, а без доп. оплаты я украшательством занимаюсь только для себя или по дружбе.
Алексей (2 комментария)
Ну в том-то и дело, что по дружбе делаю «шоб красиво»
Мой способ в том, что кнопка «подсвечивается» на :hover (смещаем спрайт на «подсвеченную» картинку), а при клике на нее смещаем спрайт на вдавленную картинку (псевдоэлемент «:focus»). Вот и всё. Но фишка в том, что, чтобы картинка после клика не осталась вдавленной (фокус-то всё ещё на ней), пишем на кнопке
onclick="this.blur();"
и тогда кнопка вернется в исходное состояние. Вот здесь IE7 и заваливается.