Bootstrap offre una varietà di stili e dimensioni di pulsanti che possono essere utilizzati per diverse esigenze di design e situazioni.

Classi comuni dei pulsanti

Pulsante di base

La classe btn funge da classe fondamentale per la stilizzazione dei pulsanti. Fornisce uno stile essenziale al pulsante, come padding, bordo ed effetti al passaggio del mouse.

Stili dei pulsanti

Bootstrap offre una varietà di stili di pulsante predefiniti che possono essere applicati utilizzando classi specifiche. Questi stili includono:

• btn-primary: Applica un colore primario al pulsante, tipicamente utilizzato per azioni principali;
• btn-secondary: Applica un colore secondario al pulsante, spesso utilizzato per azioni secondarie;
• btn-success: Conferisce al pulsante un colore indicativo di successo, spesso utilizzato per azioni positive;
• btn-danger: Fornisce un colore che segnala pericolo o azioni critiche;
• btn-warning: Applica un colore che rappresenta avviso o cautela;
• btn-info: Conferisce al pulsante un colore per comunicare messaggi informativi;
• btn-light: Applica una combinazione di colori chiara al pulsante, adatta a sfondi chiari;
• btn-dark: Applica una combinazione di colori scura al pulsante, adatta a sfondi scuri;
• btn-link: Visualizza il pulsante come un semplice link senza ulteriori stili, spesso utilizzato per azioni in linea.

Dimensioni dei pulsanti

È possibile regolare la dimensione dei pulsanti utilizzando classi specifiche.

• btn-lg: Questa classe aumenta la dimensione del pulsante, rendendolo più grande rispetto alla dimensione predefinita. È tipicamente utilizzata per pulsanti principali o evidenti che richiedono maggiore attenzione;
• btn-sm: Al contrario, questa classe riduce la dimensione del pulsante, rendendolo più piccolo rispetto alla dimensione predefinita. È spesso utilizzata per pulsanti secondari o ausiliari che necessitano di minore enfasi.

Stato disabilitato

L'aggiunta dell'attributo booleano disabled a qualsiasi elemento <button> lo rende inattivo. I pulsanti disabilitati hanno pointer-events: none applicato, impedendo l'attivazione degli stati hover e active.