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