HTMLCSS

Стилизация html button

Как кастомизировать html button.

Решил на досуге сделать адекватную html кнопку, чтобы потом применять ее в различных проектах. Сама кнопка выглядит следующим образом:

Кнопка

Полный код посмотреть можно в исходнике примера. Все просто и понятно.

Единственное стоит обратить внимание на следующие моменты:

  1. .button button::-moz-focus-inner - данный класс нужен для того чтобы border задать для мозилы, как 0, иначе при нажатии появляется пунктирная рамочка вокруг текста, что портит впечатление.
  2. position: relative - требуется для того, чтобы текст при нажатии не сдвигался вниз, как это происходит в стандартных вариантах html кнопок.

Данное решение было проверено на корректную работу в следующих браузерах

  • Opera 11
  • Chrome 9.0
  • Mozilla Firefox 3.5.16
  • Konqueror 4.4.5

В IE7 подобное решение работает не совсем корректно, для этого браузера в коде указывается *border: 0 - и в этом случае отображается как стандартная кнопка, только с фоновой картинкой, которая указана в css, что не портит дизайн и не влияет на корректную работоспособность.