Кнопка button


Содержание

Когда следует использовать элемент Button

Вы используете его, хм … ну, когда хотите разместить на странице кнопку, по которой пользователь может кликнуть, не так ли? К сожалению, все немного сложнее. В принципе это близко к истине, но давайте изучим вопрос глубже.

Сам элемент выглядит таким образом:

Что является самым распространенным результатом клика на что-нибудь на веб-сайте? Переход на новый URL-адрес, как если бы вы нажали ссылку (элемент ).

Элемент сам по себе, не может этого сделать. Было много разговоров о том, чтобы разрешить « href везде », но ничего из этого так и не вышло.

При нажатии на кнопку действительно производятся определенные действия, если используется соответствующий контекст…

Кнопка – это элемент формы

Веб-формы могут содержать кнопки для выполнения (подтверждения) действий. Вы можете подумать, что это выглядит приблизительно так:

Элемент в оболочке , по умолчанию, ведет себя именно так, как и показано выше.

Однако формы также могут иметь кнопки отмены. Вы можете дублировать вид действия кнопки, изменив поведение по умолчанию с выполнения (подтверждения) действия на отмену:

Нажатие на эту кнопку приведет к удалению всех других полей ввода (и текстовых областей) из родительского блока .

Кнопки могут содержать контент

Основной причиной использования элемента является то, что он содержит и открывающийся, и закрывающийся теги ( ). А это значит, что его можно разграничить с любым другим кодом. На практике часто возникает такая ситуация:

Пока будет сохраняться , этот смешанный контент будет отображаться на экране.

Насколько я могу судить, не существует особых ограничений относительно того, что вы можете разместить внутри кнопки, так что вы можете поместить туда что угодно, создав действительно причудливые кнопки. Возможно использование также и псевдо элементов.

Давайте оставим пока тему стилей для , хотя разные браузеры обычно имеют специальные стили, которые применяются к кнопкам. Если захотите, вы можете оставить стили, применяемые браузерами, или же полностью удалить их, и тогда ваш стиль по умолчанию будет заменять стили браузеров.

Учтите: «если кнопка не имеет валидного href, это просто элемент »

Помните, раньше я писал, что эта тема доставляет мне истинное наслаждение . Это то, что вдохновило меня на написание данной статьи. Я представлял себе, какое удовольствие получу, рассматривая различные казусы. Как, например:

Ссылка в этой кнопке не имеет смысла. 0 использован только для того, чтобы не осуществлялся переход на другую страницу, потому что идентификаторы не могут начинаться с этой цифры.

Скорее всего, выше приведенный код означает что-то типа: Я собираюсь кликнуть кнопку, чтобы сделать что-то с JavaScript. Так или иначе, это, кажется, лучше, чем использовать обычный

Если вам не нравятся эти бессмысленные ссылки, для существует неплохая альтернатива. Но, к сожалению, вне контекста блока по-прежнему остается бессмысленным элементом.

Однако все равно, кажется, лучше

Даже если ничего не делает, находясь за пределами , этот элемент все равно, по-моему, лучше использовать для прочих действий, которые не требуют перехода на другую страницу. Во всяком случае, они лучше, чем фиктивные ссылки.

Хорошо. Давайте вставим JavaScript

Это, наверное, лучшее решение. Если JavaScript требуется для любых действий связанных с кликами, то для элемента в принципе можно обходиться и без запуска JS.

Но мы можем сделать следующее:

Вы можете легко сделать « кнопку добавления » частью рабочего процесса JavaScript.

Когда целесообразнее использовать ссылки

Если у вас есть какие-нибудь гипертекстовые переходы на другие страницы, то целесообразнее оформлять их ссылкой, чтобы можно было использовать анкор. Даже если вы переназначаете ее поведение через JavaScript.

Это прогрессивное улучшение в лучшем его применении. Например:

  • Кнопка поиска обычно порождает запуск поисковых сценариев Ajax — в то время как ссылка просто может указывать на страницу поиска;
  • Кнопка « опубликовать » запускает следующий шаг публикации чего-то, что нужно пользователю — но ссылка может просто вести на страницу / опубликовать /;
  • Кнопка с миниатюрой изображения открывает отдельную панель, на которой выводится изображение в большем размере — а ссылка может просто указывать URL-адрес этого увеличенного изображения.

Если ничего больше не подходит, вставляйте кнопку с JavaScript.

Связанные проблемы

Допустим, вы использовали анкорную ссылку. Но только вы решили похвалить себя за то, что идете в ногу со временем и используете прогрессивное улучшение, как возникают некоторые проблемы.

У вас может получиться что-то похожее на то, что получилось у меня!

Но вы сами еще не совсем в порядке. MDN подробно рассматривает данную проблему :

Обратите внимание: Будьте осторожны при разметке ссылок с функциями кнопки. Действия кнопки, как правило, вызываются с помощью клавиши « Пробел », в то время как действия ссылок вызываются через клавишу Enter.

Другими словами, когда вы используете ссылки, которые должны вести себя, как кнопки, добавления только role=»button» недостаточно.

Также необходимо будет добавить ключ обработчика действий, который будет реагировать на нажатие клавиши « Пробел », чтобы обеспечить соответствие с оригинальной кнопкой.

Что получается? Вы активируете ссылки и кнопки с разными ключами. Поэтому примите это во внимание.

Ну что ж, на этом все. И хм… делайте интерактивные вещи правильно.

Данная публикация представляет собой перевод статьи « When To Use The Button Element » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS Buttons

Узнайте, как стиль кнопок с помощью CSS.

Основные стили кнопок

Кнопка по умолчанию Кнопка CSS

Пример

Цвета кнопок

Используйте свойство background-color для изменения цвета фона кнопки:

Пример

Размеры кнопок

Используйте свойство font-size для изменения размера шрифта кнопки:


Пример

Используйте свойство padding для изменения заполнения кнопки:

10px 24px 12px 28px 14px 40px 32px 16px 16px

Пример

Закругленные кнопки

Используйте свойство border-radius для добавления скругленных углов к кнопке:

Пример

Цветные границы кнопок

Используйте свойство border , чтобы добавить цветную рамку к кнопке:

Пример

Используйте селектор :hover для изменения стиля кнопки при наведении на нее указателя мыши.

Совет: Используйте свойство transition-duration для определения скорости эффекта «Hover»:

Пример

.button <
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
>

.button:hover <
background-color: #4CAF50; /* Green */
color: white;
>
.

Кнопки теней

Use the box-shadow property to add shadows to a button:

Пример

.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>

.button2:hover <
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>

Отключенные кнопки

Используйте свойство opacity для добавления прозрачности к кнопке (создает «отключенный» вид).

Совет: Вы также можете добавить свойство cursor со значением «not-allowed», которое будет отображать «нет парковки знак» при наведении указателя мыши на кнопку:

Пример

Ширина кнопки

По умолчанию размер кнопки определяется по ее текстовому содержимому (так же широко, как и ее содержимое). Используйте свойство width для изменения ширины кнопки:

Пример

Группы кнопок

Удалите поля и добавьте float:left к каждой кнопке, чтобы создать группу кнопок:

Пример

Группа кнопок на границе

Используйте свойство border для создания группы кнопок с рамками:

Пример

Вертикальная группа кнопок

Используйте display:block вместо float:left для группирования кнопок ниже друг друга, вместо того, чтобы бок о бок:

HTML тег

Тег используется для создания интерактивных кнопок на веб-странице. В отличие от одинарного тега (с атрибутом type=”button”), при помощи которого также можно создавать кнопки, содержимым тега может быть как текст, так и изображение.

Если вы хотите создать кнопку в HTML форме, используйте элемент , так как браузеры по-разному отображают содержимое тега .

Синтаксис

Содержимое тега пишется между открывающим и закрывающим тегами.

Пример

Результат

Использование CSS стилей

К тегу можно применять CSS стили для изменения внешнего вида кнопки, ее размера, цвета, шрифта текста и т.д.

Пример

Результат

Атрибуты

У тега нет обязательных атрибутов, однако мы рекомендуем всегда использовать атрибут type=”button”, если тег используется в качестве обычной кнопки.

Как сделать кнопку в html css? Красивые кнопки для сайта с примерами

Приветствую! В этой статье хочу поговорить про кнопки, на мой взгляд один из важнейших элементов в дизайне сайтов и приложений. Ведь, в большинстве случаев, кнопки нужны для того, чтобы заставить пользователя выполнить какое-либо действие (подписаться на рассылку, добавить товар в корзину, оставить комментарий, заказать обратный звонок и т.д.), которое можно так или иначе монетизировать. Мы же здесь не просто так собрались ;)

Итак из этой статьи вы узнаете:


  • Для чего нужны кнопки и какие функции они выполняют
  • Какие бывают кнопки и в чем их различия
  • Как сделать кнопку в HTML
  • Как сделать красивую кнопку в HTML и CSS

Также в конце статьи вас ждет небольшой бонус, который пригодится каждому сайтостроителю.

Но давайте по порядку.

Для чего нужны кнопки на сайте?

Ответ напрашивается сам собой: “Для того, чтобы их нажимали!”. И, действительно, выделяющаяся симпатичная кнопка привлекает гораздо больше внимания чем тусклая и унылая ссылка. С другой стороны, если вся страница заполнена разномастными кнопками, которые, переливаясь и моргая, требуют внимания пользователя, он, скорее всего, не поняв, что от него требуется, не нажмет ни на одну и просто закроет вкладку.

Поэтому использовать кнопки надо “экономно”, в идеале не больше 1-2 в видимой области экрана. При этом пользователю должно быть максимально понятно, что произойдет, если он нажмет на кнопку.

Какие бывают кнопки?

В моем представлении кнопки бываю двух типов, для каждого из них я использую соответствующие HTML-теги:

Кнопки-ссылки нужны для привлечения внимания к ссылке. Побуждают пользователя перейти на какую-либо страницу, например, страницу регистрации. Для них я использую тег .

Кнопки-действия нужны для совершения какого-либо действия на странице (отправка формы, открытие модального окна и т.д.). Для этого можно использовать теги или . Я предпочитаю второй вариант, т.к. он гораздо более гибкий в настройке.

В то же время атрибут href является невалидным для тега , поэтому его не стоит использовать в качестве кнопки-ссылки. Опять же, можно сделать кнопку ссылкой, придумав какие-нибудь “костыли” типа

Илон Маск рекомендует:  Как сделать так, чтобы на событие onclick фон менялся

Но зачем это нужно. Все гораздо проще и понятнее.

Если кнопка нужна для перехода на страницу — используем , во всех остальных случаях —

Как сделать кнопку в HTML?

Тег используется для создания кнопок, при нажатии на которые должны происходить какие-либо действия, например отправка формы, очистка формы, открытие модального окна, загрузка изображения и т.д.

Основными атрибутами таких кнопок являются:

type: button | submit | reset

Тип кнопки. Это необязательный параметр, и его можно пропустить. Если кнопка находится внутри формы и атрибут type отсутствует, браузер посчитает, что тип кнопки — submit и попытается отправить форму обработчику.

Несмотря на слухи, которые ходят в интернете, о том, что тег должен располагаться только внутри тегов

Кнопки Form, Type, Submit и Reset

Для того, чтобы отправить данные из формы в обработчик, нужно использовать специальную кнопку отправки, которую также требуется создать внутри формы. Но это не единственное применение кнопок. Можно создать кнопку очистки формы.

Кроме этого, существуют пустые кнопки, функции которых определяются с помощью скриптов. Работу тех и других мы с вами разберем в этой статье, а также научимся создавать красивые кнопки.

Базовые кнопки форм. HTML

Submit. Кнопка отправки

Чтобы создать кнопку отправки нужно вписать тег с атрибутом type=»submit». Через атрибут можно указать название, которое будет отображаться на странице.

Кнопка «Отправить» дает специальную команду веб-странице. По ней, все значения формы сохраняются через указанный метод и отправляются в обработчик.

Reset. Кнопка очистки

Данная кнопка позволяет очистить все формы от записей. Очень полезно для пользователя, если он вдруг ввел неправильную букву или сделал неправильный выбор в чекбоксе.

Создается также, как и кнопка отправки, только меняется тип кнопки. Значение submit меняем на reset, а в атрибуте задаем название — «Очистить».

Button. Создание пустой кнопки

Кнопки submit и reset имеют всего одну неизменную функцию. Тип button в этом плане, очень сильно и выгодно отличается. Пустой кнопке можно привить любую функцию, однако сделать это гораздо сложнее.

Для создания пустой кнопки используйте тип . В атрибуте , также нужно указывать название кнопки.

Создание всплывающего окна. HTML, CSS & JavaScript

Стандартные кнопки, созданные обычным HTML 5, не имеют хорошего дизайна и какие-либо функции. Ниже будет представлено пара примеров правильного использования пустых кнопок.

Сейчас мы создадим кнопку, после нажатия на которую нам придет сообщение об успешной отправке данных.

Сейчас мы будем работать с браузерными событиями, используя JavaScript. Создайте документ с расширением .js и назовите его scripts.js

Чтобы связать файл JavaScript и нашу кнопку, зададим ей специальный атрибут . Он будет обрабатывать событие, которое произойдет при нажатии.

Кнопка

HTML-элемент создает кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает user agent, но вы можете изменить внешний вид кнопки, используя CSS.

Категории контента Общий поток, текстовый контент, интерактивный контент, listed, labelable, и submittable form-associated элемент, очевидный контент.
Разрешённый контент Текстовый контент.
Tag omission None, both the starting and ending tag are mandatory.
Разрешённый родительский контент Любой элемент с поддержкой текстового контета.
Разрешённые роли ARIA
DOM interface объекта интерфейса, он также доступен для них по наследству) для манипулирования расположением и представлением элементами кнопки.»> HTMLButtonElement
Тип Строчный

Атрибуты

autofocus HTML5 Данный булевый атрибут позволяет указать, будет ли кнопка автоматически сфокусирована после загрузки страницы, до тех пор, пока пользователь не изменит фокус в ручную, например выбрав другой элемент. Только один связанный с формой элемент в документе может иметь данный атрибут. autocomplete Использование данного атрибута на элементе не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, Firefox сохраняет назначенное динамически отключенное состояние для элемента при последующих загрузках страницы. Установка для данного атрибута значения off отключает подобное поведение. Смотрите баг 654072. disabled

Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от ; если отсутсвует элемент-контейнер, с установленным атрибутом disabled, то кнопка доступна для взаимодействия.

Firefox по умолчанию, в отличие от прочих браузеров, сохраняет назначенное динамически отключенное состояние для элемента , даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут autocomplete .

formHTML5 Атрибут form позволяет указать элемент ) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.»> , с которым связана кнопка. Данный атрибут должен хранить значение id элемента ) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.»> . Если данный атрибут не установлен, то элемент будет связан с родительским элементом ) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.»> , если последний существует. Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент с формой, даже в случае, если не является наследником элемента ) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.»> . formactionHTML5 Ссылка на обработчик формы. Если атрибут определен — он переопределит атрибут action у формы-родителя. formenctypeHTML5 Если button имеет тип submit , то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута:

  • application/x-www-form-urlencoded : значение по умолчанию, если атрибут не указан.
  • multipart/form-data : следует использовать это значение, если форма содержит элемент используется для создания интерактивных элементов управления в веб-формах.»> со значением атрибута type file .
  • text/plain

Если этот атрибут определен, он переопределяет атрибут enctype у формы-родителя.

formmethodHTML5 Если button имеет тип submit , то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты:

  • post : данные формы включаются в тело сообщения и отправляются на сервер.
  • get : данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута action и непосредственно данных, отделенных знаком ‘?’. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name& >Если этот атрибут определен, он переопределяет атрибут method у формы-родителя.

formnovalidate HTML5 Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке. Если этот атрибут определен, он переопределяет атрибут novalidate у формы-родителя. formtarget HTML5 Если button имеет тип submit , этот атрибут является именем или ключевым словом ,

указывающим, где отображать ответ, полученный после отправки формы . This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the button’s form owner. The following keywords have special meanings:

  • _self : Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
  • _blank : Load the response into a new unnamed browsing context.
  • _parent : Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self .
  • _top : Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self .


name The name of the button, which is submitted with the form data. type The type of the button. Possible values are:

  • submit : The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
  • reset : The button resets all the controls to their initial values.
  • button : The button has no default behavior. It can have client-side scripts associated with the element’s events, which are triggered when the events occur.
  • menu: The button opens a popup menu defined via its designated element.

value The initial value of the button.

Пример

Please note that this button has CSS applied.

HTML :: Создание кнопок при помощи тега

Тег и его атрибут type

Элемент ‘button’ , формирующийся парным тегом (от англ. button – кнопка), используется для создания кнопок, тип которых определяется атрибутом type . В качестве значений атрибут может принимать следующие три:

  • «button» – создает обычную кнопку;
  • «reset» – создает кнопку сброса формы в первоначальное состояние;
  • «submit» – создает кнопку отправки данных формы на сервер.

По своему действию элемент ‘button’ очень похож на элемент ‘input’ с аналогичными значениями атрибута type , но при этом он не является пустым элементом и позволяет размещать внутри себя другие элементы, например, изображения, которые потом становятся одной активной кнопкой. А далее, используя стили CSS , можно изменять внешний вид кнопки по своему усмотрению.

Другие атрибуты тега

Помимо атрибута type элемент ‘button’ имеет еще ряд уже известных нам атрибутов: autofocus , disabled , form , formnovalidate , formaction , formenctype , formmethod , formtarget , name , value . Их можно посмотреть в нашем справочнике здесь.

Опять же, не стоит забывать, что собственные атрибуты кнопок переопределяют значения соответствующих атрибутов, если они указаны в элементе ‘form’.

Использование элемента ‘button’ показано в примере №1.

Пример №1. Использование элемента ‘button’

Обратите внимание, что кнопка отправки неактивирована. Обычно это делается для того, чтобы кнопка не использовалась до тех пор, пока в поле не будет введен текст. После ввода минимального количества символов, которое устанавливается скриптами, кнопка активируется (опять же скриптами) и становится доступной для использования.

Когда следует использовать элемент Button

Вы используете его, хм … ну, когда хотите разместить на странице кнопку, по которой пользователь может кликнуть, не так ли? К сожалению, все немного сложнее. В принципе это близко к истине, но давайте изучим вопрос глубже.

Сам элемент выглядит таким образом:

Что является самым распространенным результатом клика на что-нибудь на веб-сайте? Переход на новый URL-адрес, как если бы вы нажали ссылку (элемент ).

Элемент сам по себе, не может этого сделать. Было много разговоров о том, чтобы разрешить « href везде », но ничего из этого так и не вышло.

При нажатии на кнопку действительно производятся определенные действия, если используется соответствующий контекст…

Кнопка – это элемент формы

Веб-формы могут содержать кнопки для выполнения (подтверждения) действий. Вы можете подумать, что это выглядит приблизительно так:

Элемент в оболочке , по умолчанию, ведет себя именно так, как и показано выше.

Однако формы также могут иметь кнопки отмены. Вы можете дублировать вид действия кнопки, изменив поведение по умолчанию с выполнения (подтверждения) действия на отмену:

Нажатие на эту кнопку приведет к удалению всех других полей ввода (и текстовых областей) из родительского блока .

Кнопки могут содержать контент

Основной причиной использования элемента является то, что он содержит и открывающийся, и закрывающийся теги ( ). А это значит, что его можно разграничить с любым другим кодом. На практике часто возникает такая ситуация:

Пока будет сохраняться , этот смешанный контент будет отображаться на экране.

Насколько я могу судить, не существует особых ограничений относительно того, что вы можете разместить внутри кнопки, так что вы можете поместить туда что угодно, создав действительно причудливые кнопки. Возможно использование также и псевдо элементов.

Давайте оставим пока тему стилей для , хотя разные браузеры обычно имеют специальные стили, которые применяются к кнопкам. Если захотите, вы можете оставить стили, применяемые браузерами, или же полностью удалить их, и тогда ваш стиль по умолчанию будет заменять стили браузеров.

Учтите: «если кнопка не имеет валидного href, это просто элемент »

Помните, раньше я писал, что эта тема доставляет мне истинное наслаждение . Это то, что вдохновило меня на написание данной статьи. Я представлял себе, какое удовольствие получу, рассматривая различные казусы. Как, например:

Ссылка в этой кнопке не имеет смысла. 0 использован только для того, чтобы не осуществлялся переход на другую страницу, потому что идентификаторы не могут начинаться с этой цифры.

Скорее всего, выше приведенный код означает что-то типа: Я собираюсь кликнуть кнопку, чтобы сделать что-то с JavaScript. Так или иначе, это, кажется, лучше, чем использовать обычный

Если вам не нравятся эти бессмысленные ссылки, для существует неплохая альтернатива. Но, к сожалению, вне контекста блока по-прежнему остается бессмысленным элементом.

Однако все равно, кажется, лучше

Даже если ничего не делает, находясь за пределами , этот элемент все равно, по-моему, лучше использовать для прочих действий, которые не требуют перехода на другую страницу. Во всяком случае, они лучше, чем фиктивные ссылки.

Хорошо. Давайте вставим JavaScript

Это, наверное, лучшее решение. Если JavaScript требуется для любых действий связанных с кликами, то для элемента в принципе можно обходиться и без запуска JS.

Но мы можем сделать следующее:

Вы можете легко сделать « кнопку добавления » частью рабочего процесса JavaScript.

Когда целесообразнее использовать ссылки

Если у вас есть какие-нибудь гипертекстовые переходы на другие страницы, то целесообразнее оформлять их ссылкой, чтобы можно было использовать анкор. Даже если вы переназначаете ее поведение через JavaScript.

Это прогрессивное улучшение в лучшем его применении. Например:

  • Кнопка поиска обычно порождает запуск поисковых сценариев Ajax — в то время как ссылка просто может указывать на страницу поиска;
  • Кнопка « опубликовать » запускает следующий шаг публикации чего-то, что нужно пользователю — но ссылка может просто вести на страницу / опубликовать /;
  • Кнопка с миниатюрой изображения открывает отдельную панель, на которой выводится изображение в большем размере — а ссылка может просто указывать URL-адрес этого увеличенного изображения.

Если ничего больше не подходит, вставляйте кнопку с JavaScript.

Связанные проблемы

Допустим, вы использовали анкорную ссылку. Но только вы решили похвалить себя за то, что идете в ногу со временем и используете прогрессивное улучшение, как возникают некоторые проблемы.

У вас может получиться что-то похожее на то, что получилось у меня!


Но вы сами еще не совсем в порядке. MDN подробно рассматривает данную проблему :

Обратите внимание: Будьте осторожны при разметке ссылок с функциями кнопки. Действия кнопки, как правило, вызываются с помощью клавиши « Пробел », в то время как действия ссылок вызываются через клавишу Enter.

Другими словами, когда вы используете ссылки, которые должны вести себя, как кнопки, добавления только role=»button» недостаточно.

Также необходимо будет добавить ключ обработчика действий, который будет реагировать на нажатие клавиши « Пробел », чтобы обеспечить соответствие с оригинальной кнопкой.

Что получается? Вы активируете ссылки и кнопки с разными ключами. Поэтому примите это во внимание.

Ну что ж, на этом все. И хм… делайте интерактивные вещи правильно.

Данная публикация представляет собой перевод статьи « When To Use The Button Element » , подготовленной дружной командой проекта Интернет-технологии.ру

Когда следует использовать элемент button

Вы можете использовать элемент button , например, в случае, если вам понадобилась кнопка, по которой кликают пользователи, верно? Однако все немного сложнее. Давайте разберемся более детально.

Что наиболее часто случается при клике на чем-либо? Переход на новый URL, например, в случае при клике по ссылке ( ).

Элемент button , сам по себе, не сможет выполнить “переход на новый URL”. Шло много разговоров об использовании атрибута href : “ href везде”, но ничего не вышло.

Клик по кнопке делает что-то лишь тогда, когда кнопка находится в естественной среде обитания кнопки.

Button есть элемент формы

Формы имеют кнопки отправки. Например:

В форме элемент button , по умолчанию, ведет себя идентично приведенному выше элементу input .

Button может иметь контент

Основная причина для использования button это наличие открывающего и закрывающего тега button . Наличие открывающего и закрывающего тега дает нам возможность размещать внутри кнопки любые html-элементы. Часто можно увидеть следующую картину:

Для input этот смешанный контент было бы трудно осуществить (у input может быть ).

Вы свободны расположить на кнопке сколь угодно контента (html-разметки), так же вы можете использовать псевдо-элементы.

Стоит отметить, что браузеры по-разному стилизуют (по умолчанию) элемент button . Вы можете назначить для кнопки свой стиль, но перед тем как подключать свой стиль потребуется сбросить стиль кнопки по умолчанию, например:

Давайте считать: “Если кнопка не имеет атрибута href, то это button”

Выше нет необходимости в href . 0 здесь лишь для того, чтобы не прыгать по странице, так как id не может начинаться с числа.

Скорее всего html-код, приведенный выше, делает следующее: по клику на элементе выполняется какое-либо действие javascript. Так или иначе, это лучше, чем использовать div , так как вы получаете изменение курсора и стили по умолчанию.

Если вам не нравятся нагромождение href , то элемент button отличная альтернатива. Но, к сожалению, за пределами формы элемент button также становится бессмысленным.

Что лучше использовать: элемент button или ссылку с фиктивным href?

Если вам нужно кнопка, которая не ведет на другую страница, а просто выполняет какое-либо действие на javascript лучше всего использовать button .

Теоретически, тег должен располагаться внутри формы, устанавливаемой элементом

  • Дата: 2014-02-08
  • Просмотров: 12160
  • Автор: хъ
  • Комментарии к статье

    > Но, к сожалению, за пределами формы элемент button также
    > становится бессмысленным.

    Во-первых, у кнопки можно указать атрибут form=»id формы» и связать кнопку в произвольном месте страницы с произвольной формой.
    А во-вторых, onclick можно обрабатывать JS.

    Кнопки | CSS

    Простая HTML кнопка для сайта

    Есть несколько типов input для создания кнопки и тег button [ type=»button | reset | submit» ]. Внешне и функционально они абсолютно одинаковы.

    Когда использовать тег button?

    • button имеет открывающий и закрывающий тег, а значит он может содержать дочерние теги,
    • когда текст на кнопке один, а значение value при клике должно передаваться другое.

    Как сделать кнопку на CSS

    Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.

    Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»

    Динамические эффекты реализуются благодаря псевдоклассам:

    • :hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
    • :active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
    • :focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в «половинном» состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.

    Надо признать, что сложнее всего придумать как будет вести себя кнопка во время нажатия.

    Код кнопки для сайта

    Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.

    Кнопка с градиентом

    Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].

    А вот всякие перемещения работают на ура.

    Довольно популярно разделение кнопки на два цвета


    Красивые кнопки CSS

    Кнопки «Скачать» CSS

    Стилизация кнопок с помощью CSS

    Анимированная кнопка: «свечение текста»

    Стиль кнопок с бликами

    Кнопки меню

    Объёмная кнопка CSS

    Вдавленная кнопка

    Выпуклая кнопка HTML

    Круглые CSS кнопки

    Анимированная кнопка CSS

    Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].

    3d кнопка CSS

    Оформление кнопок

    Кнопки сайта следует выполнять в едином стиле, чтобы не оставалось сомнений, что если здесь нажать, то произойдёт какое-то действо.

    Кнопка с главным действием должна выделяться из общего содержания, быть контрастной. Тут главное не переусердствовать. Так, например, у интернет магазина e5 это приятно для глаза: А тут с оранжевым явный перебор, даже на изображении сложно остановить взгляд:

    Именно поэтому у Google второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.

    Также нужно победить желание сделать кнопку величиной со слона, чтобы не стать объектом баннерной слепоты.

    98 комментариев:

    damir-tote Спасиб NMitra, что подобное искал =) А не можешь еще показать, как сделать вертикальное выпадающее меню, только не вбок, а вниз)) NMitra См. http://shpargalkablog.ru/2011/07/accordion-css.html

    В качестве содержания добавляйте список ol из ссылок. Дмитрий Вып. список это просто) Даже просто введя в гугл вып список на цсс можно найти NMitra Посмотрите последний пример http://shpargalkablog.ru/2012/04/display-block-inline-css.html с наведением на пункт меню или с постановкой галочки справа. Есть вариант с :focus, но в Хроме нужно подключать картинку, я не стала поэтому расписывать.

    Это на CSS, а можно ещё добавить небольшой скрипт. segur Как мне нравится этот блог ! Этот сайт давно у меня в «золотых» закладках !

    Спасибо за Ваши толковые статьи и примеры ! NMitra Благодарю за комментарий! Настроение сразу вверх растёт. Анонимный Спасибо большое автору, очень помогло на практике. NMitra Рада, что мои записи вам пригодились :) Анонимный Если нахожу что-то полезное на сайте, всегда благодарю автора не словами, а кликами по всем рекламным блокам которые нахожу на странице. В этот раз пришлось искать все рекламные блоки. Спасибо автору. NMitra Повеселили по поводу «пришлось искать все рекламные блоки» :) Спасибо, что заботитесь о моём благосостоянии и оценили статью. Алексей А онлаайн генератором можно создать кнопку под свой вкус http://phpguru.com.ua/servis/css3button/ русскоязычный генератор css3 кнопок. Не сочтите за спам но мне понравился! NMitra Проглядела много генераторов кнопок и не представляю как с их помощью можно сделать хоть что-то приемлемое. В статье я просто привожу примеры и надеюсь, что их код не будут брать целиком. Можно посмотреть как реализована тень текста на кнопках, как создаётся эффект нажатия, как сделать, чтобы один текст заменялся другим и при этом правильно выравнивался, какие цвета чаще всего используют, как сделать неполные боковые линии и т.п. Это именно черновой вариант, который можно и нужно изменять, как минимум высоту и ширину. Станислав Автору поклон за труды! Кладезь полезных решений для любого проекта. Выразил благодарность еще и переходом по рекламе — идея порадовала:) NMitra Благодарю, Станислав. Да, одно время не могла пройти мимо интересной кнопки, пусть даже нарисованной. Надо код немного доработать, а то в Safari кое-где ерунда получается. Например, из background следует выделить background-color Анонимный Итересно автор открывал страницу своего материала хотябы в Safari? NMitra Открыл-открыл ))) Добавьте префикры -moz- и -webkit- к таким свойствам как transition, background разбейте на background-color и background-image и всё будет нормально. Или воспользуетесь SCSS, тот автоматом делает тоже самое. Я не нашла причин почему мне нужно было усложнять код. FOMUVI Сложно пройти мимо и не поблагодарить. Спасибо! Классная выборка кнопок, а главное много и все разные. Есть с чего выбрать и заточить под себя. Класс! NMitra Благодарю, что не прошли мимо! Анонимный Не работают стили для оперы, подскажите, что нужно сделать? NMitra Какой пример вас заинтересовал? Сергей Полежака очень понравилась button4, но некоторые браузеры ее не показывают почему то Алексей Хорошая статья с помощью нее сделал нормальную кнопку Анонимный Норм та так, спасибо Анонимный все супер, но как выставить фиксированные размеры кнопки? а то автоматом подгоняет под текст, т.е. под количество написанных букв. NMitra Для ширины указать width и text-align: center; Убрать padding-left и padding-right, например, так: padding: 15px 0.

    Для высоты сложнее. Можно указать одинаковую height и line-height, но line-height не поддерживается некоторыми мобильными браузерами, например, Opera Mini. Совсем убрать padding.

    Можно добавить дополнительно :before http://shpargalkablog.ru/2012/04/vertical-align.html#inline-before (см. «Ура, оно») Максим Грачев Как изменит размер кнопки? NMitra padding — это отступ до границы border
    width — ширина
    height — высота
    line-height должна быть равна height, чтобы выравнять текст по центру. См. http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html
    font-size — размер шрифта NMitra Подбирайте значения под себя. В большинстве случаев достаточно изменить padding.
    Одно значение: отступ от содержимого для каждого края.
    Два значения: первое для вертикальных, второе — горизонтальных сторон.
    Три значения для верхней/по бокам/нижней сторон.
    Четыре значения: вверх/справа/низ/слева.
    См. http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#p-m-storona Регина Спасибо! Очень круто! Серж Благодярю! огромный выбор классных кнопок! все стили подходят, можно выбрать для любого дизайна) Намного ускоряют верстку, отличная заготовка! Анонимный спасибо NMitra Пожалуйста, очень рада таким отзывам! Анонимный Хорошая статья! Подскажите, пожалуйста, как на анимированной кнопке button31 повернуть «стрелку» влево (она там направлена вниз). То, что нужно править второй блок я понял, в частности менять градусы и положения, но получается какая-то несуразица.
    П. С. К верстке сайтов не имею никакого отношения, html и CSS знаю настолько, насколько мне необходимо — изредка сваять себе хтмл-файлик, как каталог файлов. Но вот на свою голову проблемы нашел — решил сделать себе сайтик и нужна кнопка возврата на предыдущую страницу, которая появляется при адаптации при открытии сайта с моб. устройств, а там стрелочка влево нужна. NMitra a.button31:after, a.button31:before <
    content: «»;
    position: absolute;
    z-index: -1;
    left: 0%;
    top: -10%;
    right: 0;
    bottom: 0;
    width: 30%;
    height: 10%;
    margin: auto;
    background: #999;
    box-shadow: 0 1px rgba(0,0,0,.1) inset, 0 1px #fff;
    transform: rotate(-35deg);
    >
    a.button31:after <
    top: 15%;
    transform: rotate(-315deg);
    > Дима a.button1 <
    font-weight: 900;
    color: white;
    text-decoration: none;
    padding: .8em 1em calc(.8em + 3px);
    border-radius: 3px;
    background:#4d6f91;
    transition: 0.2s;
    width:500;

    Хочу чтобы кнопки были одной ширины а параметр width:500; нечего не изменяет NMitra display: inline-block;
    width: 500px;
    padding: .8em 0 calc(.8em + 3px);
    text-align: center; Robomatic Спасибо больше, без воды, с примерами, кратко и по делу. NMitra Благодарю за отзыв! тотр спасибо, господи
    NMitra :)) Max Огромное спасибо, сегодня пол дня пытался сделать подобную кнопку без плагина на wordpress, дома вечером с первого запроса в Google попал на Вашу страничку :) Наконец то закрою вопрос с кнопочками! СПАСИБО! NMitra Благодарю за отзыв! Анонимный Подскажите пожалуйста, как вставить такую кнопку на страницу в вордпресс? Если не сложно, то расскажите по-подробнее, так как я еще не очень хорошо разбираюсь в этом (Пытался несколькими способами, описанными в интернете, не получилось) NMitra Смотрите в поиске Яндекса/Google

    если планируется кнопка на многих страницах — «как изменить шаблон wordpress». Для кнопки или ссылки в файле php добавляете класс, например, . А стили — в файл .css, например,
    .button16

    если для одной страницы, то должна быть кнопка для перехода в «HTML»-режим при написании/редактировании статьи. В нужное место добавляете и стили, и кнопку. Только в этом случае стили нужно вписывать обязательно внутри

    Я, к сожалению, не изучала админку WP Владимир Левыкин Доброго времени суток ))) Сразу оговорюсь, я тока начинаю юзать joomla. Подскажите как правильно? и где нужно что прописать в шаблоне protostar что бы ваши код css применялся адекватно просто уже 3 день мыкаюсь не могу применить стиль. То шаблон разъезжается то кнопка везде где ненужно появляется )))) печаль беда )))). ( Я не волшебник, я тока учусь ) NMitra Владимир, доброе время суток. Не осерчайте, но вам сюда http://shpargalkablog.ru/p/comments-blog.html Эдуард Столько всего, я прям растерялся. Анонимный Поменяла кнопку на форуме php bb 3.0, а текст кнопки пропал, как его восстановить?
    NMitra По-подробнее (пропал — стал прозрачным или был заменён на тот, что между тегами a?) или адрес страницы сайта Анонимный Пропал в прямом смысле слова, его совсем не видно, но кнопка работает.
    NMitra Не, так не могу, адрес страницы сайта, пожалуйста Анонимный К сожалению сайт на локалке находиться, могу только код переслать, но здесь публиковать сайт не хочет. NMitra Добавьте на http://jsfiddle.net/ Анонимный Вот, готово https://jsfiddle.net/Ltuku5gn/ NMitra А где HTML? Анонимный классный сайт Анонимный А можно ваши кнопки сразу ставить на сайт или на форуме вставлять в ком? Они будут работать? (начинающий) Ирина Офигенно, спасибище. NMitra Начинающий, что вы имеете ввиду под «Будут работать»? Ваши кнопки изначально должны работать (перенаправлять куда-то посетителя, отправлять форму и т.п.), а это всего лишь украшение кнопок.

    Ирина, благодарю за комментарий! Анонимный Понимаете, я в этих кодах не разбираюсь, но. кнопки очень понравились. сайтами не занимаюсь, но красиво подать ссылку на файл попробовал. тупо вставил код кнопки добавил адрес на файл и вроде работает! Пример: http://bogoglasnik.ru/load/88-1-0-1380?l_ZeHf (начинающий) Анонимный Добрый день. Подскажите пожалуйста, как сделать кнопку что бы она была ссылкой, вела на другую страницу? Где вписать ссылку
    А так вроде со всем разобрался и с цветом и размером, а вот как сделать ее ссылкой что бы при нажатии переходить на другую страницу
    Заранее благодарен. NMitra Заполните атрибут href (подробнее http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html )

    кнопка Анонимный Спасибо большое! (начинающий) stobuxov Спасибо, облазил пол интернета, самая лучшая подборка и описание, спасибо. NMitra Благодарю, стараюсь обращать внимание на интересные варианты Анонимный Здравствуйте. Отличная статья. Только хотелось бы уточнить у автора поподробнее о том, как скорректировать код (например для — Вдавленная кнопка), чтобы работало в браузере Safari. Я пока не смог понять, как правильно разбить background на background-color и background-image. Может автор показать правильно скорректированный код? NMitra Здравствуйте, например,

    background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));

    background-color: rgb(206, 220, 231);
    background-image: linear-gradient(rgb(206,220,231), rgb(89,106,114)); Medoti Dorf Приветствую, спасибо за статью!
    Подскажите, как сделать кнопку по всей ширине блока ?
    a.knopka <
    color: #fff; /* цвет текста */
    text-decoration: none; /* убирать подчёркивание у ссылок */
    user-select: none; /* убирать выделение текста */
    background: rgb(212,75,56); /* фон кнопки */
    padding: .7em 1.5em; /* отступ от текста */
    outline: none; /* убирать контур в Mozilla */
    >
    a.knopka:hover < background: rgb(232,95,76); >/* при наведении курсора мышки */
    a.knopka:active < background: rgb(152,15,0); >/* при нажатии */ NMitra Здравствуйте!

    a.knopka <
    display: block;
    text-align: center;
    > Medoti Dorf Спасибо! Анонимный Не знаю, когда я наткнулся на эту статью и добавил ее в немногочисленные закладки — года 2 назад. За это время воспользовался примерами раз 20-30 точно! Спасибо автору, и низкий ей поклон! Анонимный По поводу SAFARI — я все сделал, но кнопка все равно показывается некорректно.
    Не могли бы вы написать полностью обновленный код в ответе для кнопки — button22, тогда все станет понятно.
    Спасибо.
    NMitra Комментарий 71: спасибо за отзыв, для меня он важен!
    Комментарий 72: попробуйте так http://jsfiddle.net/NMitra/fyd1nzfk/ Анонимный добрый день! скажите пожалуйста можно ли чтобы кнопка уже была нажата и была не активной. допустим из этого примера:
    кнопка «button17»
    за ранее буду очень признателен! спасибо! NMitra Добрый день, вместо
    a.button17:focus:not(:active) <>
    напишите
    a.button17 <>
    Но обычно её делают более приглушённого цвета (плюс можно попробовать прозрачность http://shpargalkablog.ru/2013/02/opacity-css.html ). Анонимный Кто знает как делать, свяжитесь со мной по miheyzih@mail.ru Анонимный скопировал и вставил на свой сайт , кнопка не вышла, нужно что либо добавлять еще к этому коду?
    Объясните как ребенку, т.к еще зелен в этих делах NMitra Посмотрите тут, пожалуйста, http://shpargalkablog.ru/p/comments-blog.html#html Анонимный Большое огромное спасибо автору блога. Андрей пивоварчик Привет, спасибо за кнопки. Но возникает небольшая проблема. В каждой из кнопок при наведении кроме подсветки и других эффектов всплывает какая-то красная линия. Как ее убрать подскажите плз. Сайт на wordpress , если это важно Андрей пивоварчик Заметил,что это происходит только на определенной теме wordpress NMitra Попробуйте для :hover дописать
    outline: none; sawkow1 Спасибо Мастер, получилось красиво:
    http://djk-tanzen.de/?mod=anmeld
    Но на safari, к сожалению не работает. Unknown Отличный материал спасибо, но есть вопрос, возможно ли сделать например в кнопке button31, такой эффект, чтобы после нескольки секунд анимация заменялась на другую кнопку автоматически? NMitra Можно. Спасибо за идею! Но ваш вопрос требует несколько большего времени, чем я располагаю. Извините. http://shpargalkablog.ru/p/comments-blog.html Михаил Евсеев Лучшие! В закладки! Анонимный СПАСИБО ЗА ВАШ ТРУД. Анонимный Здравствуйте NMitra.Я новичок. Делаю сайт с помощью корсофтовского комплекса. Делать начал из «спортивного интереса». С текстами как то все сложилось а вот оформление хотелось бы улучшить. Задумал интерактивные кнопки. Воспользовался генераторами кнопок, потому как познания в НTML и CSS нулевые. Генератор выдал два кода НTML и CSS. Не могу объединить.Не хватает познаний. Буду признателен за помощь.Cпасибо.HTML: a href=’#’ >Talia Screen Orizzontale NMitra Здравствуйте, так в HTML добавляйте

    Анонимный спасибо за кнопки — выглядят супер . Анонимный Очень помогло в работе ибо начинающий.
    Однако, как отцентровать текст относительно иконки, что стоит перед кнопкой
    height:40px; (высота кнопки)
    line-height:40px; (незнамо что, но если равно высоте кнопки, то текст выравнивается по высоте относительно иконки слева)
    Узнал только прочитав форум, надо чтобы height=line-height

    Вот сейчас опять перечитываю в поисках как убрать подчёркивание.

    Очень не хватает просто подробного описания, какой параметр что значит.

    Огромное спасибо Автору странички, без информации выше было бы очень тяжко.Спасибо. Анонимный Извиняюсь, но никак не получается создать кнопку например, высотой 24 пикселя с иконкой (24х24).
    так чтобы текст на копке и иконка слева от текста были по середине кнопки. По горизонтали всё ок , Но то что иконка или текст постоянно съезжают куда то по вертикали, удручает.

    Всякие комбинации служебных слов перепробовал, но понять так и не смог.

    Может что подскажете. Заранее огромное Спасибо!

    a.button_main_ico <
    float: left;
    width: 200px;
    height:24px;
    font-size: 16px;
    font: Verdana,Arial,Helvetica;
    text-align:center;
    border:none;
    border-radius: 6px;
    color:#F8F8F8;
    background-color:#3895EA;
    text-decoration: none;
    outline: none;
    user-select: none;;
    transition: 0.2s;
    >
    a.button_main_ico:hover <
    background-color: #BABABA;
    >
    a.button_main_ico:focus <
    background-color: #D8D8D8;
    >
    a.button_main_ico:focus:hover <
    background-color: #DFDFDF;
    >

    a.button_main_ico:before <
    content: url(../ico_L_ready.png);
    > NMitra Вы иконку добавляете с помощью :before? Тогда текст нужно окружить span. :before и span задать vertical-align: middle;

    a.button_main_ico:before,
    a.button_main_ico span <
    content: url(../ico_L_ready.png);
    vertical-align: middle;
    >

    пример https://jsfiddle.net/NMitra/533605pm/
    теория http://shpargalkablog.ru/2012/04/vertical-align.html Анонимный NMitra — спасибо огромное за внимание и заданное направление.
    Иконка у меня 24х24, у вас в примере 16х16 и в итоге когда я подставляю своё то у меня всегда съезжает вниз текст. Иконка стоит правильно, текст начинается где-то с её середины.
    Пока разбираюсь.

    Спасибо за участие и заданное направление.

    За отклик и направление Огромное Спасибо. NMitra Высота-то указана фиксированной height:24px; Анонимный Однако, нашёл ответ который мне подошёл.

    в HTML
    Кнопка с иконкой и текстом выравненные по середине кнопки:
    Кнопка

    Тоже но без иконки:
    Кнопка

    (слово «класс» — поменять на английское а то тут не печаталось)

    В CSS
    a.button_main <
    float: left;
    width: 200px;
    height:24px;
    font-size: 16px;
    font: Verdana,Arial,Helvetica;
    text-align:center;
    border:none;
    border-radius: 6px;
    color:#F8F8F8;
    background-color:#550000;
    text-decoration: none;
    outline: none;
    user-select: none;;
    transition: 0.2s;
    >
    a.button_main:hover <
    background-color: #BA0000;
    >
    a.button_main:focus <
    background-color: #D80000;
    >
    a.button_main:focus:hover,a.button_history:focus:hover <
    background-color: #DF000;
    >

    .ico_name <
    background-image: url(../ico_name.png);
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background-position: 0px -1px;

    Тут приятно, что класс кнопки, отвязан от класса иконки. Значит используем один класс на все кнопки приложения и лишь меняем классы иконок по надобности.

    Спасибо вы натолкнули на верный путь, с уважением sharpionok Анонимный Вместо HTML кода напечаталась ссылка чёрти куда. Как показать код в HTML не понимаю.=(

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL