Bootstrap ofrece una variedad de estilos y tamaños de botones que pueden utilizarse para diferentes necesidades y situaciones de diseño.

Clases comunes de botones

Botón básico

La clase btn funciona como la clase base para el estilo de los botones. Proporciona estilos esenciales como relleno, borde y efectos al pasar el cursor.

Estilos de botones

Bootstrap ofrece una variedad de estilos de botones predefinidos que se aplican mediante clases específicas. Estos estilos incluyen:

• btn-primary: Aplica un color primario al botón, normalmente utilizado para acciones principales;
• btn-secondary: Aplica un color secundario al botón, a menudo usado para acciones secundarias;
• btn-success: Da al botón un color indicativo de éxito, comúnmente usado para acciones positivas;
• btn-danger: Proporciona un color que indica peligro o acciones críticas;
• btn-warning: Aplica un color que representa advertencia o precaución;
• btn-info: Da al botón un color para transmitir mensajes informativos;
• btn-light: Aplica un esquema de color claro al botón, adecuado para fondos claros;
• btn-dark: Aplica un esquema de color oscuro al botón, adecuado para fondos oscuros;
• btn-link: Muestra el botón como un enlace simple sin estilos adicionales, a menudo usado para acciones en línea.

Tamaños de botones

Se puede ajustar el tamaño de los botones utilizando clases específicas.

• btn-lg: Esta clase aumenta el tamaño del botón, haciéndolo más grande que el tamaño predeterminado. Se utiliza normalmente para botones principales o destacados que requieren mayor atención;
• btn-sm: Por el contrario, esta clase reduce el tamaño del botón, haciéndolo más pequeño que el tamaño predeterminado. Suele emplearse para botones secundarios o auxiliares que necesitan menos énfasis.

Estado deshabilitado

Agregar el atributo booleano disabled a cualquier elemento <button> lo vuelve inactivo. Los botones deshabilitados tienen aplicado pointer-events: none, lo que impide que se activen los estados hover y active.