Создание ссылок в HTML. Кнопочные ссылки

На многих сайтах, например в интернет-магазинах, можно встретить множество кнопочных ссылок. Это может быть ссылка на подробное описание товара, корзину или создание заказа. В этой статье мы поговорим о том, как создать кнопочные ссылки, которые будут идеально дополнять дизайн вашего сайта.

Создание обычных ссылок. 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>

Ссылки в HTML

Теперь подробнее об атрибутах тега <a>:

  1. "href" — ссылка на элемент. Можно ввести ссылку на файл для скачивания. Будьте аккуратны, если случайно перепутать большую букву с маленькой, ссылка не активируется.
  2. "target" — отвечает за открытие документа в окне. Наша запись "target="_blank"" открывает ссылку в новом окне не закрывая нашу страницу.
  3. "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;

}

Ссылки в HTML

Итак, теперь наши кнопки имеют нормальный вид, однако чего-то не хватает. Давайте изменим их состояния. Для этого нам понадобятся селекторы состояния ссылок: ":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;

}

CSS ссылки

Далее заполним нашу страницу небольшим контентом и добавим кое-какие стили. Теперь у нас получалась веб-страница с хорошо стилизованными кнопками.

Заключение

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

Удачи!

Теги:
0

Оставить своё мнение

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