Stili di pulsanti in bootstrap 5 | Spiegato
Aggiunta di colori ai pulsanti
Puoi aggiungere un colore di sfondo ai pulsanti che non solo aggiungono loro bellezza, ma trasmette anche lo scopo dietro il pulsante. Per fare ciò puoi usare una di queste classi fornite che lo sono, .btn, .BTN-PRIMARY, .Btn-Success, .BTN-INFO, .btn-secondario, .btn-warning, .BTN-DANGER, .btn-dark, .BTN-Light.
Come aggiungere colori al pulsante usando bootstrap 5
Nell'esempio seguente dimostreremo alcune delle classi sopra menzionate.
Html
Il codice sopra genera tre pulsanti, prima con uno stile di base, secondo con un colore di sfondo verde e indicando un'azione positiva e l'ultimo con un colore di sfondo blu e rappresenta un'azione importante. Si noti che abbiamo usato il .Classe BTN durante lo styling di ogni pulsante perché questo fornisce una certa imbottitura al pulsante insieme a uno stile di base.
Produzione
Puoi provare altre lezioni per vedere come modellano i pulsanti.
Pulsanti come collegamenti
Puoi anche collegare altre pagine Web o fonti ai pulsanti in Bootstrap 5.
Come reindirizzare un utente a un'altra fonte usando il pulsante
Supponiamo di voler reindirizzare i tuoi utenti a un'altra fonte usando un pulsante.
Html
CollegamentoQui puoi semplicemente fornire il collegamento dell'altra sorgente all'attributo HREF del tag di ancoraggio. Inoltre, il pulsante creato nello snippet di codice sopra avrà un colore blu chiaro e uno stile di base.
Produzione
Ecco come puoi creare pulsanti come collegamenti.
Pulsante di ingresso
Oltre ai tag di ancoraggio puoi anche utilizzare le classi di pulsanti sopra menzionate anche sugli ingressi. Come sai, il tag può rendere alcuni tipi come invio o reset, pertanto, è possibile applicare lo stile a uno di questi tipi di input.
Come applicare le classi di pulsanti sugli ingressi
Ecco come si può applicare le classi di pulsanti sugli ingressi.
Quanto sopra genererà tre tipi di pulsanti di ingresso con ciascun pulsante con un colore di sfondo diverso.
Produzione
In questo modo puoi applicare le classi associate a pulsanti su vari tipi di input.
Dimensizzazione dei pulsanti
In alcuni scenari desideriamo fare pulsanti allargati, nel frattempo, in altri casi, vogliamo il contrario. Usando le classi collegate alle dimensioni dei pulsanti possiamo ottenere questa attività.
Come modificare le dimensioni dei pulsanti in bootstrap 5
Considera l'esempio seguente per capire come creare pulsanti di varie dimensioni.
Html
Nel codice sopra, stiamo generando tre pulsanti di dimensioni piccole, medie e grandi rispettivamente. A tutti i pulsanti è stato dato anche un certo stile.
Produzione
Questi sono pulsanti di varie dimensioni.
Pulsanti che delinea
Puoi anche delineare i tuoi pulsanti usando il .btn-outline classe in combinazione con le classi di colore per modellare i tuoi pulsanti.
Come dare il contorno ai pulsanti in bootstrap 5
Supponiamo di voler delineare il pulsante usando Bootstrap 5, quindi segui lo snippet di codice di seguito.
Quanto sopra genererà un pulsante con uno schema verde, inoltre, quando si porta il mouse sul pulsante verrà applicato un effetto hover che gli fornirà un colore di sfondo corrispondente alla classe di colore utilizzata ogni volta che il mouse viene portato su di esso.
Produzione
Il pulsante è stato dato uno schema insieme a un effetto hover.
Pulsanti attivi e disabilitati
Per aggiungere bellezza al tuo pulsante puoi aggiungere stati come attivi o disabilitati sui pulsanti o modellare gli stati del pulsante.
Come fare un pulsante diadimogeno in bootstrap 5
Generiamo due pulsanti, uno con uno stato attivo e l'altro con uno stato disabilitato.
Html
Nel codice sopra, il primo pulsante ha uno stile di base insieme a uno sfondo azzurro e uno stato attivo, nel frattempo, il secondo è stato disabilitato e ha lo stesso stile del primo. Inoltre, entrambi i pulsanti hanno il colore del testo bianco.
Produzione
Questi sono pulsanti con gli stati attivi e disabili.
Pulsanti a livello di blocco
Ai fini della creazione di pulsanti che occupano l'intero spazio orizzontale è necessario assegnare il .D-grid Classe per il div contenente l'elemento del pulsante, nel frattempo, assegnare il .BTN-Block Classe per l'elemento pulsante.
Come creare un pulsante a livello di blocco utilizzando Bootstrap 5
Creiamo un pulsante a livello di blocco.
Html
Qui stiamo generando un pulsante a tutta larghezza usando il .Classe D-Grid sull'elemento genitore che lo rende tutta la larghezza dell'elemento genitore.
Produzione
L'uscita sopra mostra un pulsante a livello di blocco.
Conclusione
I pulsanti possono essere disegnati in diversi modi usando le varie classi Bootstrap 5 associate ai pulsanti. Ad esempio, puoi aggiungere colori ai pulsanti usando classi come .BTN-PRIMARY, .Btn-Success, .btn-info, ecc. Inoltre, è possibile utilizzare altre classi disponibili per creare pulsanti come collegamenti, dare loro una certa dimensione, uno schema o renderli a livello di blocco. Questo blog discute vari stili che puoi fornire ai pulsanti usando Bootstrap 5.