кнопка ссылка html input

font-size: 11px; /* размер шрифта кнопки */

background: url(path-to/button.png) no-repeat; /* длинная картинка - левая часть фона кнопки */

padding: 5px 6px 0 6px; /* внутренние отступы кнопки */

height: 23px; /* высота кнопки */

color: #fff; /* цвет текста кнопки */

<input type="submit" value="" />текст кнопки

<div class="button">

Воспользуемся следующим приемом:

На сайте может быть много форм, а на крупных сайтах — очень много. Каждая форма как правило имеет кнопку. И бывает так, что в разных формах текст в кнопке должен быть разным: ok, сохранить, задать вопрос менеджеру и т.п. Чтобы не плодить для каждой формы отдельный фон для кнопки, лучше сделать одну универсальную кнопку. Это не только съекономит трафик за счет сокращения картинок, но и сделает верстку более гибкой (не нужно будет каждой новой кнопке с отличающимся текстом рисовать новый фон и добавлять классы).

На кой это нужно?

ну и конечно же кроссбраузерность и следование стандартам

отсутствие javascript (еще одна причина использовать < >)

кликабильность всей поверхности кнопки

использование тега < > (чтобы сохранить логичность кода. Как сделать с < >, пока не нашел решения)

ширина кнопки зависит от текста в ней

Для формы сделать резиновую (тянущуюся) кнопку по ширине с особым оформлением (с обычным оформлением уверен у тебя проблем не возникает).

Дата публикации: 29.11.2009 Последнее обновление: 09.12.2010

Подготовил: Евгений Рыжков

Резиновая кнопка для формы

Резиновая кнопка для формы (используя input)