В этой статье я покажу Вам несколько вариантов html кода для кнопок которые создаются при помощи тега button.
Тег button не является блочным элементом, и его можно вставлять в другие теги HTML.
Тем более это нужно делать, ведь обычно кнопка располагается как отдельный элемент, и если её не поместить в блок (p или div), то она расположиться в конце той строки, которая находится перед ней.
Первый пример рассмотрим в HTML документе, а в остальных будет изменяться только содержание тега body
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Кнопки HTML</title>
</head>
<body>
<p><button>Кнопка</button></p>
</body>
</html>
Следующую кнопку сделаем с применением тегов таблиц.
Код:
<p><button> <table border="1"> <tr> <td>Кнопка</td></tr></table></button></p>
Оформление кнопки
Дальше немного интереснее, так как в следующем примере мы в тег button, введём атрибут style и сможем использовать стилевые свойства.
А это значит, что кнопке можно будет придать более оригинальное оформление.
Код:
<button style="background: #fdeaa8; width: 80px; height: 40px; border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;">Кнопка</button>
Давайте подробно рассмотрим, какие свойства мы применили для оформления.
1. background: #fdeaa8; — цвет кнопки;
2. width: 80px; — ширина кнопки;
3. height: 40px; — высота кнопки;
4. border-radius: 5px; — закруглённые уголки, если вместо 5px поставить 50%/50%, то кнопка станет округлой;
5. box-shadow: 0px 1px 3px; — создаёт тень, делает кнопку более выпуклой;
6. font-size: 20px; — размер текста;
В тег button можно вставить и картинку.
Код:
<button style="border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;"><img src="images/s20.png" style="vertical-align: middle;">Кнопка</button>
Ссылка вместо кнопки
Если не использовать кнопку в скриптах, то вместо button можно использовать ссылку а.
Вот самая простая форма, которую можно придать ссылке
<a style="background: #fdeaa8; border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px; padding:10px; text-decoration:none;" href="*">Кнопка</a>
