Серёжа СыроежкинСерёжа СыроежкинКопирайтер

Кнопка HTML

теги: html, кнопки

Кнопку в HTML можно сделать тремя различными способами:

  • С помощью тега input;
  • С помощью тега button;
  • С помощью ссылки (тег a) и CSS-свойств.

Тег input

Тег input может использоваться для создания различных элементов ввода на странице (текстовое поле ввода, кнопка и других) и принимать значения следующих атрибутов:

  • type - указывает на тип элемента (в нашем случае это button);
  • name - позволяет задать имя элемента (это необходимо, например, для идентефикации кнопки обработчиком формы);
  • value - задает значение для элемента (например, для передачи данных формы) и это значение выполняет роль надписи на кнопке.

Таким образом, записанная с помощью тега input кнопка будет выглядеть так:

<input type="button" name="nubex" value="Nubex" />

Результат:

Тег button

Кнопки для сайта могут быть определены и с помощью тега button HTML. Преимущество этого тега перед input заключается в том, что здесь можно добавить на кнопку и другие элементы, к примеру, изображение:

<button name="nubex" value="Nubex">
<img style="vertical-align: middle; width: 24px;" src="http://nubex.ru/files/siroezhkin/icon.png" alt="" />
Конструктор сайтов "Нубекс"
</button>

Результат:

Атрибуты тега button такие же, как и у input, отличие лишь в том, что значение value теперь не является надписью на кнопке, а служит только для передачи значения на сервер.

Кнопка-ссылка

Третий вариант создания кнопки на странице - использование тега a, т. е. обычной ссылки. Вид кнопки ссылка приобретает при применении к ней нужных CSS-стилей. Рассмотрим вариант создания кнопки с помощью ссылки:

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Кнопка ссылка</title>
   <style>
	a.nubex {
	color: #fff;
	user-select: none; /* Убираем текстовое выделение */
	text-decoration: none;	/* Убираем подчеркивание */
	outline: none; /* Убираем контур вокруг ссылки */
	background-color: #fa8e47; /* Цвет фона */
	padding: 1em 2em; /* Отступ от текста до рамки */
	}
	a.nubex:active {
	background-color: #ee6206; /* Цвет кнопки при нажатии */
	}
	a.nubex:hover {
	background-color: #f97f2e; /* Цвет кнопки при наведении курсора */
	}
   </style>
 </head>
 <body>
  <a href="#" class="nubex">Кнопка-ссылка</a>
 </body>
</html>

Данный способ предоставляет большое преимущество и свободу в оформлении кнопки.

В конструкторе сайтов "Нубекс" кнопки-ссылки можно вставлять через визуальный редактор. О добавлении кнопок вы можете узнать больше в статье: Просто добавьте кнопку!

Комментарии 0