Кнопка 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="domain" value="domin"> <img style="vertical-align: middle; width: 24px;" src="http://https://webdomainplus.com/files/icon.png" alt="" /> Домены </button>
Другой пример:
<form>
<div style="padding-left: 9px;">
<input type="button" style="font-weight: bold" value="Отзывы о хостерах — узнай правду!" onclick="javascript:window.location='https://webdomainplus.com/reviews/'"/> </div>
</form>
Атрибуты тега button такие же, как и у input, отличие лишь в том, что значение value теперь не является надписью на кнопке, а служит только для передачи значения на сервер.
Кнопка-ссылка
Третий вариант создания кнопки на странице — использование тега a, т. е. обычной ссылки. Вид кнопки ссылка приобретает при применении к ней нужных CSS-стилей. Рассмотрим вариант создания кнопки с помощью ссылки:
<title>Кнопка ссылка</title>
<style>
a.domain {
color: #fff;
user-select: none; /* Убираем текстовое выделение */
text-decoration: none; /* Убираем подчеркивание */
outline: none; /* Убираем контур вокруг ссылки */
background-color: #fa8e47; /* Цвет фона */
padding: 1em 2em; /* Отступ от текста до рамки */
}
a.domain:active {
background-color: #ee6206; /* Цвет кнопки при нажатии */
}
a.domain:hover {
background-color: #f97f2e; /* Цвет кнопки при наведении курсора */
}
</style>
</head>
<body>
<a href="#" class="domain">Кнопка-ссылка</a>
</body>
Вместе с этим читают: Цвета RGB Шрифты HTML-код
просмотров: 196