
На многих сайтах, например в интернет-магазинах, можно встретить множество кнопочных ссылок. Это может быть ссылка на подробное описание товара, корзину или создание заказа. В этой статье мы поговорим о том, как создать кнопочные ссылки, которые будут идеально дополнять дизайн вашего сайта.
Создание обычных ссылок. HTML
Хоть в HTML существуют теги <input>, типа <button>, и обычные теги <button>, но они используются лишь в формах. В основном в основе большинства кнопок на сайтах лежат ссылки.
Сначала научимся создавать обычные ссылки, для этого нам понадобится тег <a>. Это непарный строчный тег, который не занимает всю ширину страницы, если он не обернут в тег параграфа. Для изменения блочности можно использовать CSS свойство <display>
Создаем 3 тега <a>, с атрибутами "class", "href" и "target". В дальнейшем они послужат для создания наших кнопок. Зададим им следующие названия:
- 1 ссылка: Подробнее;
- 2 ссылка: Записаться;
- 3 ссылка: Курсы;
Чтобы задать название просто впишите слова между открывающим и закрывающим тегом, так же как с параграфами или заголовками.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Тестовая страница</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p><a target="_blank" href="#" class="button">Подробнее</a></p>
<p><a target="_blank" href="#" class="button">Записаться</a></p>
<p><a target="_blank" href="#" class="button">Материалы</a></p>
</body>
</html>

Теперь подробнее об атрибутах тега <a>:
- "href" — ссылка на элемент. Можно ввести ссылку на файл для скачивания. Будьте аккуратны, если случайно перепутать большую букву с маленькой, ссылка не активируется.
- "target" — отвечает за открытие документа в окне. Наша запись "target="_blank"" открывает ссылку в новом окне не закрывая нашу страницу.
- "class" — задает класс для ссылки, который будет использоваться в качестве селектора. Вместо классов можно использоваться id, но в нашем случае кнопок несколько, а значит class использовать намного удобнее. Один id задается только для одного элемента.
Если открыть страницу, то вы увидите 3 синие подчеркнутые ссылки. Они пока имеют плохой внешний вид, но скоро мы это исправим.
Создание кнопочных ссылок. HTML & CSS
Итак, мы создали основу для наших будущих кнопок, но она выглядит не очень. Чтобы это изменить воспользуемся CSS стилями.
Создаем новый файл и сохраняем его с расширением .css. В нем вписываем селектор ".button", который и отвечает за стилизацию наших кнопок.
Для начала изменим цвет текста и уберем эту линию подчеркивания, которая так бьет по глазам. Для этого используем следующие свойства: "color: #000; text-decoration: none". Все свойства рекомендуется записывать на каждой новой строчке со знаком «;». Если не написать его, то последующие стили работать не будут
Далее идет расположение и размерность кнопки. Для изменения этих параметров мы используем свойство "padding", "margin" и "display". С помощью "padding" мы изменяем внутренние отступы, тем самым увеличивая размер кнопки. "Margin" позволит нам задать хорошее расположение для кнопок, задавая внешние отступы.
Не все CSS свойства применяются к тем или иным элементам. В нашем примере свойство margin нужно применять не к ".button", а непосредственно к самому тегу <p>
.button{
color: #fff;
text-decoration: none;
padding: 5px;
background-color: green;
border-radius: 5px;
transition: All 0.2s ease;
}
p{
margin: 40px 0;
}

Итак, теперь наши кнопки имеют нормальный вид, однако чего-то не хватает. Давайте изменим их состояния. Для этого нам понадобятся селекторы состояния ссылок: ":hover"; ":active"; ":visited";
Hover — состояние ссылки, на которую наведен курсор мыши. Давайте изменим размер ссылки для этого состояния. Задаем свойство {transition} для селектора .button(transition: All 0.2s ease).
Пока не будем углубляться в него, всё что нужно знать, что анимация будет длиться 0.2сек.
Создаем селектор ".button:hover", который будет отвечать за стилизацию наведенной ссылки. И зададим такие свойства: border: 3px solid green; color: green; padding: 8px;
Как видим наша кнопка немного увеличилась, а также претерпела радикальные изменения в цвете. Цветовая гамма осталась та же, но расположение изменилось.
.button{
color: #fff;
text-decoration: none;
padding: 5px;
background-color: green;
border-radius: 5px;
transition: All 0.2s ease;
}
p{
margin: 40px 0;
}
.button:hover{
padding: 8px;
border: 3px solid green;
background: none;
color: green;
}

Далее заполним нашу страницу небольшим контентом и добавим кое-какие стили. Теперь у нас получалась веб-страница с хорошо стилизованными кнопками.
Заключение
Только что вы научились создавать красивые кнопки для сайтов с помощью HTML и CSS. Теперь, для закрепления материала, добавьте изображения на сайт. Картинки должны находиться в теге <a> и содержать ссылки. Сделайте так, чтобы при наведении картинка уменьшалась.
Удачи!
Теги: