Сначала определите поведение

«Перейти в каталог» ведёт на другой адрес, поэтому это ссылка. «Открыть фильтры» меняет состояние интерфейса, поэтому это кнопка. «Отправить заявку» запускает отправку формы. Внешне все три элемента могут быть похожи, но браузеру и вспомогательным технологиям нужно сообщить разное назначение.

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

Описание ссылок и их атрибутов есть в справке MDN по элементу a. Выбор элемента стоит делать до оформления, а не пытаться исправлять назначение добавлением случайных ролей после вёрстки.

Пример ссылки, похожей на кнопку

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

<a class="catalog-link" href="/catalog/">
  Перейти в каталог
</a>

Название должно описывать результат перехода. «Нажмите сюда» требует прочитать окружающий текст, а «Посмотреть условия доставки» понятно само по себе. Не обещайте открыть форму, если фактически ведёте на другую страницу, и не используйте пустой href как временную замену неизвестному адресу.

Если адрес ещё не готов, лучше не показывать рабочую на вид навигацию. Пустая ссылка или символ решётки может переместить страницу неожиданным образом и создать впечатление ошибки. Завершайте маршрут до публикации элемента.

Как добавить оформление и фокус

Стиль должен сохранять читаемость и заметность элемента. Отступы увеличивают область нажатия, а ограничение ширины помогает длинному тексту переноситься на маленьком экране. Не фиксируйте высоту под единственную короткую подпись: перевод или увеличение масштаба меняют размер текста.

.catalog-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 1.2rem;
  border-radius: 0.6rem;
  background: #243321;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.catalog-link:hover { background: #344a2e; }
.catalog-link:focus-visible {
  outline: 3px solid #486c35;
  outline-offset: 4px;
}

Проверьте контраст обводки с реальным окружением. Состояние hover не заменяет фокус, потому что клавиатура и сенсорный экран работают иначе. Не убирайте стандартную обводку, пока не подготовили заметную и проверенную замену.

Переход к разделу и новая вкладка

Для перехода внутри страницы используйте фрагмент адреса, совпадающий с уникальным id целевого блока. Название идентификатора в примере условное. Если на сайте закреплена верхняя панель, предусмотрите отступ прокрутки, чтобы она не закрывала заголовок после перехода.

<a class="catalog-link" href="#delivery-info">Доставка</a>
<section id="delivery-info">
  <h2>Условия доставки</h2>
</section>

Новую вкладку открывайте только при понятной необходимости. Для внешнего перехода можно использовать target="_blank" и rel="noopener"; предупредите пользователя о таком поведении, если оно неожиданно. Не лишайте его возможности самому выбрать способ открытия обычной ссылки.

Если непонятно, какие изменения нужны в первую очередь, начните с диагностики. SEO-аудит сайта позволяет получить отчёт с выводами и таблицу технических и контентных задач.

Когда всё-таки нужен button

Для раскрытия окна, переключения панели и других действий используйте кнопку с подходящей логикой. Внутри формы явно задавайте type="button", если элемент не должен её отправлять. Для согласованной отправки формы используется type="submit". Подробности поведения описаны в справке MDN по button.

Не вкладывайте интерактивные элементы друг в друга. Ссылка с кнопкой внутри создаёт неоднозначное управление. Если хочется одинакового дизайна, используйте общий CSS-класс для разных правильных HTML-элементов, сохраняя их собственное назначение.

Картинка тоже может быть частью ссылки, но смысл перехода должен оставаться доступным. Если изображение является единственным содержимым, его альтернативный текст должен объяснять назначение. Для обычного текстового действия чаще проще и надёжнее использовать настоящий текст.

Короткая проверка перед запуском

Нажмите Tab и убедитесь, что ссылка получает видимый фокус, затем активируйте её Enter. Проверьте переход мышью и на телефоне, увеличение масштаба и длинную подпись. Откройте адрес напрямую, чтобы убедиться в отсутствии случайной ошибки пути или ненужного редиректа.

Проверьте все экземпляры общего компонента, а не только первый на странице. Изменение CSS может затронуть кнопки в шапке, карточках и форме. Сохраняйте единый внешний стиль, но не переносите обработчики действий туда, где нужна обычная навигация.

SEO-продвижение вашего сайта

Чтобы отдельные изменения работали на привлечение клиентов, объедините семантику, контент и технические задачи в общий план. На странице SEO-продвижения сайтов описаны состав работ и порядок сотрудничества.

Частые вопросы

Нужен ли JavaScript для кнопки-ссылки?

Для обычного перехода нет. Ссылка с href и CSS-оформлением работает средствами браузера.

Можно ли использовать div с onclick?

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

Почему ссылка не ведёт к разделу?

Проверьте точное совпадение фрагмента с id, уникальность идентификатора и наличие блока на текущей странице.