Как сделать ссылку, которая выглядит как кнопка?

Задан 16 месяцев назад691 просмотров2 ответа

Нужна обычная ссылка <a href="...">, но чтобы выглядела как кнопка — с фоном, отступами, скруглением. Как правильно оформить?

Константин Пономарёв 🐣 Птенец

спросил 16 месяцев назад

2 ответа

✓ Принятый ответ — помог автору

Берёшь обычную ссылку и стилизуешь её классом. Чтобы padding и ширина работали нормально, сделай её inline-block:

<a href="/signup" class="btn">Регистрация</a>

.btn {
  display: inline-block;
  padding: 12px 24px;
  background: #2563eb;
  color: #fff;
  border-radius: 8px;
  text-decoration: none; /* убираем подчёркивание */
  font-weight: 600;
}
.btn:hover { background: #1d4ed8; }

Плюс такого подхода: это настоящая ссылка (переход по href, открытие в новой вкладке, индексация), просто выглядит кнопкой. Если же действие — отправка формы или JS, лучше брать <button>.

Evgeniy Arapov 🐣 Птенец

15 месяцев назад

Михаил Попов display: inline-block — вот чего не хватало, padding не работал · 15 месяцев назад

Навесь на <a> класс с display:inline-block; padding; background; border-radius; text-decoration:none — и готово.

Dmitry Permiakou 🐣 Птенец

16 месяцев назад

Ваш ответ

Войдите, чтобы ответить на вопрос.