Создание кнопок-ссылок [Модуль 3: Ссылки и навигация]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

В этом блоке заданий мы сосредоточимся на создании интерактивных элементов, которые выглядят как кнопки, но по своей сути являются ссылками. Это один из самых распространенных паттернов в веб-разработке, используемый для навигации, призывов к действию и многого другого. Вы научитесь использовать стандартный тег ссылки и применять к нему CSS-классы, чтобы превратить его в стильную и привлекательную кнопку. Задания построены по принципу 'от простого к сложному': мы начнем с создания базовой ссылки, затем добавим стили, разберем различные состояния (обычное, при наведении), научимся добавлять иконки и создавать неактивные (disabled) кнопки. Этот тренажер поможет вам закрепить навыки работы с тегом `<a>`, атрибутами `href` и `class`, а также понять, как HTML-структура взаимодействует с готовыми CSS-стилями для создания красивых и функциональных интерфейсов.

Список тем

Самая простая кнопка-ссылка

id: 37808_button-link-1

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

CSS

.btn {
  display: inline-block;
  padding: 10px 18px;
  background-color: #f0f0f0;
  color: #333;
  font-family: sans-serif;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid #ccc;
}

                     <input1 input2="https://naytikurs.ru" class="btn">
  Перейти на сайт
</input1>

HTML

<input1 input2="https://naytikurs.ru" class="btn">
  Перейти на сайт
</input1>

Для создания ссылок в HTML используется тег `<a>`. Чтобы ссылка была рабочей, ей необходим атрибут `href`, в значении которого указывается URL-адрес, куда должен перейти пользователь при клике. Например: `<a href="https://example.com">Текст ссылки</a>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Стилизация кнопки с помощью класса

id: 37808_button-link-2

Теперь, когда у нас есть ссылка, давайте придадим ей вид настоящей кнопки. В CSS уже подготовлен специальный класс `.btn-primary`. Ваша задача — применить этот класс к ссылке, чтобы она стала синей и более заметной.

CSS

.btn {
  display: inline-block;
  padding: 10px 18px;
  color: #333;
  font-family: sans-serif;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid transparent;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

                     <a href="#" class="btn input1">
  Основная кнопка
</a>

HTML

<a href="#" class="btn input1">
  Основная кнопка
</a>

Чтобы применить к элементу CSS-стили, используется атрибут `class`. В его значении нужно указать имя класса, определенного в CSS, без точки. Если у элемента уже есть один класс, новый можно добавить через пробел.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Разные стили кнопок

id: 37808_button-link-3

Часто на странице требуется несколько кнопок с разным дизайном: одна основная, другая — второстепенная. Создайте две кнопки-ссылки. Первой присвойте класс для основной кнопки (`btn-primary`), а второй — класс для второстепенной (`btn-secondary`).

CSS

.btn {
  display: inline-block;
  padding: 10px 18px;
  margin-bottom: 10px;
  font-family: sans-serif;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}
.btn-secondary {
  background-color: #6c757d;
  color: #fff;
  border-color: #6c757d;
}

                     <!-- Основная кнопка -->
<a href="#" class="input1">
  Сохранить
</a>

<!-- Второстепенная кнопка -->
<a href="#" class="input2">
  Отмена
</a>

HTML

<!-- Основная кнопка -->
<a href="#" class="input1">
  Сохранить
</a>

<!-- Второстепенная кнопка -->
<a href="#" class="input2">
  Отмена
</a>

Вам нужно создать две ссылки. Каждой из них нужно присвоить базовый класс `btn` и дополнительный модифицирующий класс: `btn-primary` для первой и `btn-secondary` для второй. Классы перечисляются через пробел в атрибуте `class`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Состояния кнопки: hover и active

id: 37808_button-link-4

Интерактивные элементы должны реагировать на действия пользователя. В CSS уже добавлены стили для состояний наведения (`:hover`) и нажатия (`:active`). Ваша задача — создать кнопку-ссылку, которая будет менять свой вид при наведении на нее курсора мыши.

CSS

.btn {
  display: inline-block;
  padding: 10px 18px;
  font-family: sans-serif;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-success {
  background-color: #28a745;
  color: #fff;
  border-color: #28a745;
}
.btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
}
.btn-success:active {
  background-color: #1e7e34;
}

                     <input1 input2="#" class="btn btn-success">
  Подтвердить
</input1>

HTML

<input1 input2="#" class="btn btn-success">
  Подтвердить
</input1>

Никаких специальных HTML-атрибутов для состояний `:hover` и `:active` не требуется. Вам просто нужно правильно создать кнопку-ссылку с классами `btn` и `btn-success`. CSS автоматически применит нужные стили при взаимодействии с элементом.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Кнопка с иконкой

id: 37808_button-link-5

Кнопки часто содержат не только текст, но и иконки для лучшего визуального восприятия. Создайте кнопку, внутри которой будет текст «Скачать» и иконка. Для иконки используйте тег `<i>` с соответствующим классом.

CSS

.btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-family: sans-serif;
  text-decoration: none;
  border-radius: 5px;
  background-color: #17a2b8;
  color: #fff;
  border: 1px solid #17a2b8;
}
.icon-download {
  margin-right: 8px;
  font-style: normal;
}
.icon-download::before {
  content: '↓'; /* Простая иконка стрелки */
  font-weight: bold;
}

                     <a href="#" class="btn">
  <input1 class="input2"></input1>
  Скачать
</a>

HTML

<a href="#" class="btn">
  <input1 class="input2"></input1>
  Скачать
</a>

Чтобы разместить иконку рядом с текстом, нужно вложить дополнительный тег (часто используют `<i>` или `<span>`) внутрь тега `<a>`. Этому вложенному тегу присваивается класс, который отвечает за отображение иконки (в нашем случае `icon-download`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Неактивная кнопка

id: 37808_button-link-6

Иногда кнопку нужно показать, но сделать некликабельной. Для этого используется специальный класс. Ваша задача — создать кнопку-ссылку и добавить ей класс `.disabled`, чтобы она выглядела неактивной.

CSS

.btn {
  display: inline-block;
  padding: 10px 18px;
  font-family: sans-serif;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}
.disabled {
  opacity: 0.65;
  pointer-events: none;
  cursor: not-allowed;
}

                     <a href="#" class="btn btn-primary input1">
  Неактивна
</a>

HTML

<a href="#" class="btn btn-primary input1">
  Неактивна
</a>

Чтобы сделать кнопку-ссылку визуально и функционально неактивной, просто добавьте к остальным классам (`btn` и `btn-primary`) еще один класс — `disabled`. CSS-свойство `pointer-events: none;` заблокирует клики по ней.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Кнопка на всю ширину

id: 37808_button-link-7

Часто в мобильных интерфейсах или формах кнопки должны занимать всю доступную ширину родительского контейнера. Используйте специальный модификатор класса, чтобы сделать кнопку блочной.

CSS

.btn {
  display: inline-block;
  padding: 12px 20px;
  margin-bottom: 10px;
  font-family: sans-serif;
  text-decoration: none;
  text-align: center;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background-color: #007bff;
  color: #fff;
}
.btn-block {
  display: block;
  width: 100%;
}

                     <div style="width: 250px;">
  <a href="#" class="btn btn-primary input1">
    Войти
  </a>
</div>

HTML

<div style="width: 250px;">
  <a href="#" class="btn btn-primary input1">
    Войти
  </a>
</div>

Для того чтобы кнопка растянулась на всю ширину, ей нужно задать класс-модификатор `btn-block`. Этот класс изменяет `display` элемента, заставляя его вести себя как блочный элемент.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку