Кнопку в 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>Данный способ предоставляет большое преимущество и свободу в оформлении кнопки.
В конструкторе сайтов "Нубекс" кнопки-ссылки можно вставлять через визуальный редактор. О добавлении кнопок вы можете узнать больше в статье: Просто добавьте кнопку!