O Bootstrap oferece uma variedade de estilos e tamanhos de botões que podem ser utilizados para diferentes necessidades e situações de design.

Classes Comuns de Botões

Botão básico

A classe btn serve como a classe fundamental para estilização de botões. Ela fornece estilos essenciais, como espaçamento interno (padding), borda e efeitos ao passar o mouse (hover).

Estilos de botões

O Bootstrap oferece uma variedade de estilos de botões predefinidos que podem ser aplicados usando classes específicas. Esses estilos incluem:

• btn-primary: Aplica uma cor primária ao botão, normalmente utilizada para ações principais;
• btn-secondary: Aplica uma cor secundária ao botão, frequentemente usada para ações secundárias;
• btn-success: Aplica ao botão uma cor indicativa de sucesso, geralmente utilizada para ações positivas;
• btn-danger: Fornece uma cor que indica perigo ou ações críticas;
• btn-warning: Aplica uma cor que representa alerta ou cautela;
• btn-info: Aplica ao botão uma cor para transmitir mensagens informativas;
• btn-light: Aplica um esquema de cores claro ao botão, adequado para fundos claros;
• btn-dark: Aplica um esquema de cores escuro ao botão, adequado para fundos escuros;
• btn-link: Exibe o botão como um link simples, sem estilização adicional, frequentemente usado para ações em linha.

Tamanhos de botões

É possível ajustar o tamanho dos botões utilizando classes específicas.

• btn-lg: Esta classe aumenta o tamanho do botão, tornando-o maior que o tamanho padrão. Normalmente utilizada para botões principais ou de destaque que exigem mais atenção;
• btn-sm: Por outro lado, esta classe reduz o tamanho do botão, tornando-o menor que o padrão. Frequentemente utilizada para botões secundários ou auxiliares que necessitam de menos destaque.

Estado desabilitado

Adicionar o atributo booleano disabled a qualquer elemento <button> o torna inativo. Botões desabilitados possuem pointer-events: none aplicado, impedindo que os estados de hover e ativo sejam acionados.