Как сделать кнопку читать далее в html

Аватар пользователя Aleksey
Aleksey
06 апреля 2023

Для создания кнопки "Читать далее" в HTML можно использовать тег <a> с атрибутом href, указывающим на страницу с полной версией материала. Для того чтобы кнопка выглядела как кнопка, а не как обычная ссылка, необходимо использовать CSS.

Пример кода:

<a href="full_article.html" class="read-more">Читать далее</a>

Где full_article.html - это страница с полной версией материала, а read-more - это класс, который можно добавить в CSS для стилизации кнопки.

Пример CSS-кода:

.read-more {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.read-more:hover {
  background-color: #0062cc;
}

Где display: inline-block задает тип элемента (в данном случае кнопка), padding задает отступы внутри кнопки, background-color задает цвет фона, color задает цвет текста, text-decoration: none убирает подчеркивание при наведении на кнопку, border-radius задает скругление углов, font-size задает размер шрифта, а transition задает плавное изменение цвета фона при наведении на кнопку.

0 0

Похожие вопросы

1
ответ
2
ответа