Кнопки

Реклама
uapeeradv

Кнопка 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-код

Поделиться контентом в соцсетях: vkфейсбуктвиттерtelegramлинкединпинтерест
просмотрели просмотров: 72

Комментируя, Вы соглашаетесь с правилами пользования порталом.

Ваш адрес email не будет опубликован. Обязательные поля помечены *