Рисунок на кнопке средствами CSS

Самый простой вариант создания кнопки, содержащей на себе рисунок — это нарисовать ее в каком-нибудь графическом редакторе. Такие кнопки поддерживаются в форме с помощью параметра input type=image.

Пример 1. Рисованные кнопки

Код:

Созданные указанным в примере способом кнопки, в полном смысле таковыми не являются, а скорее похожи на ссылки. При наведении курсора мыши на такую кнопку, курсор меняет свою форму, как и при работе со ссылками, а при нажатии на кнопку происходит отправка формы на сервер.
Стили позволяют на кнопках, созданных с помощью параметра input type=button или input type=submit, размещать любой фон или рисунок.

Пример 2. Создание фона на кнопке

Код:

Параметр url(bgbutton.gif) определяет, какой файл будет использоваться в качестве фона.
Точно таким же образом делается на кнопке и небольшой рисунок. Подготавливается изображение, которое будет использоваться в качестве фона, а на нем размещаете любую иконку.
— Рисунок для фона

Пример 3. Размещение рисунка на кнопках

Код:

url(imgbutton.gif) указывает пукть к рисунку, no-repeat left
Так как фоновое изображение, также как и текст, выравнивается по левому краю, чтобы не произошло наложения рисунка и текста друг на друга, текст надо сместить вправо, добавив перед ним несколько пробелов.