Преобразовать стиль привязки для кнопок «Отправить»?

Question

У меня есть класс CSS, который делает мои ссылки похожими на приятные на вид кнопки. Я хотел бы иметь возможность применять один и тот же стиль к кнопкам «Отправить» и заставить их выглядеть одинаково. Самое сложное в том, что теги привязки должны иметь внутри себя промежуток, я не думаю, что это возможно с помощью кнопок отправки формы. Так кто-нибудь знает, как сделать так, чтобы кнопки отправки соответствовали ссылкам?

Вот CSS:

a.button {
    background: transparent url('images/all_pages/bg_button_a.jpg') no-repeat scroll top right;
    color: #FFF;
    display: block;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('images/all_pages/bg_button_span.jpg') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}


a.button:hover {
    background-position: bottom right;
}

a.button:hover span {
    background-position: bottom left;
}

Спасибо!

Answer 1

Попробуйте использовать тег <button> вместо <input type="submit">. Тег <button> позволяет вкладывать такие элементы, как <span>, и, как правило, дает вам гораздо большую свободу стилей.

После того, как вы переключили кнопки отправки ваших форм на использование тега <button>, вы можете применить один и тот же CSS и к своим ссылкам, и к вашим кнопкам:

a.button,
button {
  /* ... */
}
a.button span,
button span {
  /* ... */
}
a.button:hover,
a.button:focus,
button:hover,
button:focus {
  /* ... */
}
a.button:hover span,
a.button:focus span,
button:hover span,
button:focus span {
  /* ... */
}

Для улучшения доступности каждый блок описанного выше стиля :hover расширен и на :focus состояния.

Вот хорошая статья об использовании тега <button>: http://particletree.com/features/rediscovering-the-button-element/

Answer 2

Вы можете использовать <a href="javascript: document.myform.submit()"></a> или что-то подобное для отправки форм через обычные ссылки. Тогда вам не нужны кнопки. :)

Answer 3

А как насчет использования <button type="submit"><span>Submit!</span></button> вместо?

Кроме того, вы можете найти технику, описанную здесь интересной.