Для создания кнопок используется тег <button>. Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:

<button type="button">Я кнопка</button>

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name, disabled и type.

Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.

<button type="button" name="popup-button">Я кнопка</button>

Атрибут disabled блокирует доступ к кнопке.

<button type="button" disabled>Я заблокированная кнопка</button>

Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:

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

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

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

Полный список атрибутов

Иногда на сайте встречаются элементы вроде кнопок «Перейти в каталог», «Читать далее» или кнопок соцсетей. На самом деле это ссылки. Их создают с помощью <a href="">Какой-то текст</a> и затем стилизуют так, чтобы они стали похожими на кнопки.

А как же input?

Создать кнопку можно и с помощью тега <input>, если указать ему тип button:

<input tupe="button" value="Я тоже кнопка">

Это рабочий способ. О нём надо знать, ведь вы можете встретить его в проектах. Но самим так делать не стоит. У кнопок, созданных на инпуте, есть ограничения: сложно управлять размерами и положением изображений, а также нет псевдоэлементов. Поэтому оставьте <input> для создания элементов формы, таких как текстовые поля, радиокнопки или чекбоксы. А кнопки верстайте с помощью <button>.

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

Посмотрим три способа создания кнопки с иконкой.

С помощью тега

Способ подойдёт для контентных изображений.

<button type="button">
  <img src="icon.svg" alt="Иконка" width="20" height="20">
</button>
Кнопки с контентным изображением

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

Добавить инлайн SVG в разметку

Способ подойдёт, если изображение меняет состояния, как здесь:

Код простой: пишем тег <button> и добавляем в него код SVG-изображения.

<button type="button">
  <svg width="30" height="30">
    <path d="..."/>
  </svg>
  Просто кнопка
</button>

Вставить фоном в CSS

Способ подойдёт, если иконка играет декоративную роль и не меняется при наведении или клике на кнопку. Например, в таких случаях:

Как добавить иконку в кнопку:

<button type="button">
  <span class="icon-button"></span>
  Текст кнопки
</button> 

.icon-button {
  background-image: url("../images/icon.svg");
  background-size: 90px 97px;
}

Какой способ выбрать — зависит от ваших задач и особенностей проекта. Вы также можете использовать разные методы в рамках одного проекта. Например, часть кнопок сделать со встроенным в разметку SVG, а часть — с фоновым изображением.

Материалы по теме