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

Небольшая шпаргалка, как оформить кнопку в виде картинки. Вообще-то для этого есть <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>

Результат будет выглядеть так: Пример.