Как добавить кнопку на сайт
Обычная кнопка на сайте:
Существует несколько способов добавления обычной кнопки на сайт. Рассмотрим их.
- С помощью тега <imput>. Сам тег <imput> - создает разнообразные элементы формы, этим тегом можно создавать также различные и разнообразные элементы интерфейса. Тег <imput> создает различные кнопки, флажки, переключатели, текстовые поля. С помощью тега <imput> пользователь может вводить и отправлять данные (в этом случае тег <imput> помещается внутрь контейнера <form>, поскольку данные отправляются на сервер, где и обрабатываются).
- type - означает тип элемента. Здесь будет button.
- name - задает имя элемента
- value - значение элемента. При добавлении кнопки на сайт value - это надпись на кнопке.
Итак, прописываем код кнопки:
<input type="button" name="кнопка на сайт" value="Добавить кнопку на сайт" />
В итоге получим:
Кнопка в виде изображения:
Кнопку на сайте можно сделать и в виде изображения
<button name="Кнопка" value="АС">
<img style="vertical-align: middle; width: 48px;" src="URL ИЗОБРАЖЕНИЯ">
</button>Результат:
Ссылка в виде кнопки c изображением и надписью:
Просто кнопка на сайте, конечно же, бесполезна. Чаще она нужна для перехода куда-либо(или для какого-нибудь действия), то есть кнопка выполняет роль обычной ссылки или отправки данных.
Прописываем код желаемой кнопки на сайт.
<a href="URL перехода на веб страницу" target="_blank"><button name="Кнопка" value="АС"><img style="vertical-align: middle; width: 48px;" src="URL ИЗОБРАЖЕНИЯ">Любая надпись на кнопке
</button></a>
Видимый результат ссылки в виде кнопки на сайте с изображением и надписью:
Кнопки добавляются на любую страницу сайта. Размер, цвет, текст и местоположение вашей кнопки вы настраиваете сами.
Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.
- CSS-свойств.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопка ссылка</title>
<style>
a.АС {
color: #fff;
user-select: none; /* Убираем текстовое выделение */
text-decoration: none; /* Убираем подчеркивание */
outline: none; /* Убираем контур вокруг ссылки */
background-color: #fa8e47; /* Цвет фона */
padding: 1em 2em; /* Отступ от текста до рамки */
}
a.АС:active {
background-color: #ee6206; /* Цвет кнопки при нажатии */
}
a.АС:hover {
background-color: #f97f2e; /* Цвет кнопки при наведении курсора */
}
</style>
</head>
<body>
<a href="#" class="АС">Кнопка на сайт</a>
</body>
</html>Данный способ предоставляет большое преимущество и свободу в оформлении кнопки.