, но бывает, что код кнопки находится в недоступном для редактирования файле. И тогда в ход идёт ловкость рук и css. Этот приём будет..."> , но бывает, что код кнопки находится в недоступном для редактирования файле. И тогда в ход идёт ловкость рук и css. Этот приём будет..."> , но бывает, что код кнопки находится в недоступном для редактирования файле. И тогда в ход идёт ловкость рук и css. Этот приём будет..." />

Графическое оформление кнопок

25 октября 2009. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Небольшая шпаргалка, как оформить кнопку в виде картинки. Вообще-то для этого есть <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 комментариев на «Графическое оформление кнопок»
  1. Michael de`Oz (2 комментария)

    Ещё лучше для этого использовать спрайты

    Ответить на этот комментарий
    • Княгиня (660 комментариев)

      А чуть подробней об этом можно?

      Ответить на этот комментарий
  2. Алексей (2 комментария)

    А еще можно кнопку сделать не просто картинкой, а чтобы она подсвечивалась при наведении, и становилась «вдавленной» при mousedown и снова обычной при mouseup. Естественно, надо делать спрайты. Но способ работает на 2/3 в IE7, потому что он не понимает метода «blur» (IE6 в расчет уже давно не беру :P ).

    Ответить на этот комментарий
    • Княгиня (660 комментариев)

      Я обычно обхожусь ховерностью: кнопка просто «пружинит» при наведении, этого достаточно. Заказчики редко обращают внимание на такие мелочи, а без доп. оплаты я украшательством занимаюсь только для себя или по дружбе.

      Ответить на этот комментарий
  3. Алексей (2 комментария)

    Ну в том-то и дело, что по дружбе делаю «шоб красиво» :-)

    Мой способ в том, что кнопка «подсвечивается» на :hover (смещаем спрайт на «подсвеченную» картинку), а при клике на нее смещаем спрайт на вдавленную картинку (псевдоэлемент «:focus»). Вот и всё. Но фишка в том, что, чтобы картинка после клика не осталась вдавленной (фокус-то всё ещё на ней), пишем на кнопке onclick="this.blur();" и тогда кнопка вернется в исходное состояние. Вот здесь IE7 и заваливается.

    Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.