Стилизация <button> как <a> в Bootstrap 2: nav-tabs

Быстрый ответ

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" href="#">Вкладка</a>
  </li>
  <li class="nav-item">
    <button class="btn btn-link nav-link" style="padding: 0;">Кнопка-ссылка</button>
  </li>
</ul>

Теперь кнопка становится визуально неразличимой от остальных элементов nav-tabs в Bootstrap, имитируя обычное использование гиперссылки. Разберем подробнее, как это возможно.

Методы преобразования кнопки в ссылку

Имитация кнопки через тег-якорь

Добавьте атрибут role="button", чтобы обеспечить единообразное навигационное поведение в интерфейсе.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" href="#" role="button">Ссылочная кнопка</a>
  </li>
  <!-- ... другие элементы ... -->
</ul>

Таким образом, элемент выглядит как <a>, но функционирует как кнопка!

Подробнее об этом расскажет наш спикер на видео

Применение CSS для преобразования кнопки в ссылку

Если <button> обязана сохранять свои семантические или функциональные характеристики, добавьте CSS-класс btn-anchor.

.btn-link.btn-anchor {
  outline: none !important;
  padding: 0;
  border: none;
  vertical-align: baseline;
  background-color: transparent;
  color: inherit; /* Сохраняем оригинальный цвет */
  text-decoration: underline; /* Имитация ссылки */
}

.btn-link.btn-anchor:hover,
.btn-link.btn-anchor:focus {
  text-decoration: none; /* Убираем подчеркивание при наведении и фокусировке */
}

Добавим класс к <button>, и она впишется в общую картину:

<button class="btn btn-link btn-anchor">Сюрприз, на самом деле я кнопка!</button>

Визуализация

Пусть <button> становится частью ряда ссылок nav-tabs. Вот как мы достигаем этого эффекта с помощью CSS:

.btn-link-like-tab {
  background: none;
  border: none;
  color: #007bff; // Знакомый синий цвет
  padding: 0;
  margin: 0;
}

"<button>, примени этот стиль, чтобы вгармонировать с общим видом!" — вот что она скажет, если бы могла говорить.

<button class="btn btn-link-like-tab">Теперь я не выделюсь среди вас, друзья!</button>

🥳 И это уже успех!

Трансформация кнопок: методы глубокой стилизации

"Невидимость": удаление излишних границ и очертаний

Начинаем с исключения outline, border, чтобы <button> гармонично скомпоновалась с окружающими элементами.

.remove_button_css {
  outline: none;
  border: none;
  box-shadow: none; 
}

Управление визуализацией при взаимодействии: наведение и фокус

Необходимо стандартное поведение ссылки при взаимодействии с элементом.

.remove_button_css:hover,
.remove_button_css:focus {
  color: #0056b3; // Приятный синий при наведении — наш выбор!
  text-decoration: underline; // Подчеркивание для большего похождения на ссылку
}

Окрашивание элемента

Подстраиваем цвет под оформление Bootstrap 3 или Bootstrap 4 — это не будет бросаться в глаза!

.remove_button_css {
  color: #337ab7; /* Спокойствие синего — всегда актуально! */
}

Особенности доступности: сохраняем взаимодействие

Не забывайте о href="#" в тегах <a>, переосмысленных в качестве кнопок, чтобы не утратить элементы доступности.

Полезные материалы

1. Кнопки · Bootstrap v5.0 — всё об использовании кнопок в официальной документации Bootstrap.
2. Отсутствие четкого разграничения между нативным кодом и кодом Java в jdk1.0 – Stack Overflow — хотя название обманчиво, здесь содержатся сведения о стилизации кнопок в Bootstrap.
3. Навигация · Bootstrap — подробный гайд по компоненту navs Bootstrap поможет настроить nav-tabs.
4. <a>: Тег-якорь – HTML: Язык гипертекстовой разметки | MDN — всё, что надо знать о тегах <a>, чтобы мастерски создавать ссылки.
5. Руководство | DigitalOcean — этот учебник станет вашим надежным проводником по Bootstrap.