Кнопки

Реклама
koddosadv
 

Кнопка 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://http://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='http://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-код

Реклама
vpsnetadv
 
просмотров: 3

Добавить комментарий

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

Вы можете использовать следующие HTML теги и атрибуты:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

Негативные отзывы без даты оформления заказа или учетной записи клиента, а также нарушающие правила использования, могут быть удалены!