13.08.2015 Установка Sass 21.04.2015 Смена цвета SVG изображения на странице 21.04.2015 Смена цвета SVG изображения на странице 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Замена стандартного ALERT с помощью JQUERY 29.02.2012 Замена стандартного ALERT с помощью JQUERY 30.10.2011 Модальное окно как вконтакте
#88

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

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

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

Кнопка

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

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

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

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

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


30.10.2011 Модальное окно как вконтакте 30.03.2011 Стилизация html button 30.03.2011 Стилизация html button 02.11.2011 Табы без использования JavaScript, на css и html 02.11.2011 Табы без использования JavaScript, на css и html 22.03.2011 HTML5 атрибут placeholder
О сайте