Bootstrap надає різноманітні стилі та розміри кнопок, які можна використовувати для різних дизайнерських потреб і ситуацій.

Поширені класи кнопок

Базова кнопка

Клас btn є основним для стилізації кнопок. Він забезпечує базове оформлення кнопки, таке як відступи, рамка та ефекти при наведенні.

Стилі кнопок

Bootstrap пропонує різноманітні попередньо визначені стилі кнопок, які застосовуються за допомогою відповідних класів. До них належать:

• btn-primary: Застосовує основний колір до кнопки, зазвичай використовується для основних дій;
• btn-secondary: Застосовує вторинний колір до кнопки, часто використовується для другорядних дій;
• btn-success: Надає кнопці колір, що вказує на успіх, часто використовується для позитивних дій;
• btn-danger: Застосовує колір, що сигналізує про небезпеку або критичні дії;
• btn-warning: Застосовує колір, що позначає попередження або обережність;
• btn-info: Надає кнопці колір для передачі інформаційних повідомлень;
• btn-light: Застосовує світлу кольорову схему до кнопки, підходить для світлих фонів;
• btn-dark: Застосовує темну кольорову схему до кнопки, підходить для темних фонів;
• btn-link: Відображає кнопку як просте посилання без додаткового оформлення, часто використовується для вбудованих дій.

Розміри кнопок

Розмір кнопок можна змінювати за допомогою спеціальних класів.

• btn-lg: Цей клас збільшує розмір кнопки, роблячи її більшою за розміром за замовчуванням. Зазвичай використовується для основних або помітних кнопок, які потребують більшої уваги;
• btn-sm: Навпаки, цей клас зменшує розмір кнопки, роблячи її меншою за розміром за замовчуванням. Часто використовується для другорядних або допоміжних кнопок, які не потребують акценту.

Вимкнений стан

Додавання булевого атрибута disabled до будь-якого елемента <button> робить його неактивним. Вимкнені кнопки мають застосовану властивість pointer-events: none, що запобігає спрацьовуванню станів наведення та активності.