Как вставить кнопку в HTML?

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

1. При помощи тега <a /> - этот способ стоит использовать если целевым действием является переход на другую страницу или часть страницы.

<a href="%URL%" class="button button-red">Перейти на страницу</a>

По сути это просто ссылка, визуально усиленная при помощи стилей (CSS).

a.button {
  display: inline-block;
  color: #fff;
  padding: 12px;
  border-radius: 3px;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 18px;
  line-height: 1;
  font-weight: 100;
}

a.button-red {
  background-color: red;
}

a.button-green {
  background-color: green;
}

2. При помощи тега <button />. Этим способом добавляются кнопки, целью которых является какое-то действие на текущей странице, например, отправка формы, очистка формы, открытие модального окна, загрузка изображения и т.д.

<button onсlick="alert('Действие выполнено');">Выполнить действие</button>

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

3. При помощи тега <input />. Этот способ можно использовать если кнопка размещена внутри тегов <form></form>. При этом тег должен иметь атрибут type со значением button, submit или reset

<input type="submit" value="Отправить" />

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

Больше информации о том, где, как и зачем использовать кнопки в HTML, а также несколько простых способов создания красивых кнопок в HTML и CSS вы можете найти в нашей статье на Siterost.net