Il pulsante è un elemento selezionabile utilizzato per eseguire un'azione specifica. Usando i CSS, puoi impostare diversi stili di pulsanti, uno di questi è cambiare il colore di un pulsante al clic. Il colore di un pulsante può essere impostato utilizzando il CSS “ :attivo ” pseudo-classe.
Questo blog ti insegnerà la procedura relativa alla modifica del colore del pulsante al clic. Per questo, in primo luogo, scopri la pseudo-classe :active.
Quindi, iniziamo!
Che cos'è “:active” nei CSS?
La modifica del colore del pulsante al clic in CSS è possibile con l'aiuto del ' :attivo ” pseudo-classe. In HTML, indica un elemento che viene attivato quando l'utente fa clic su di esso. Inoltre, quando si utilizza un mouse, l'attivazione inizia premendo il tasto del mouse.
Sintassi
un : attivo {
colore : verde ;
}
“ un ” si riferisce all'elemento HTML su cui verrà applicata la classe :active.
Andiamo verso un esempio per comprendere il concetto affermato.
Come modificare il colore del pulsante al clic in CSS?
Per cambiare il colore di un pulsante al clic, prima crea un pulsante in un file HTML e assegna il nome della classe ' btn ”.
HTML
< corpo >< pulsante classe = 'btn' > Pulsante < / pulsante >
< / corpo >
Quindi, in CSS, imposta il colore del pulsante. Per farlo useremo “ .btn ” per accedere al pulsante e impostare il colore del pulsante come “ RGB(0, 255, 213) ”.
CSS
.btn {colore di sfondo : rgb ( 0 , 255 , 213 ) ;
}
Successivamente, applica :active pseudo-classe sul pulsante come ' .btn: attivo ” e impostare il colore del pulsante che apparirà nello stato attivo come “ RGB(123, 180, 17) ”:
.btn : attivo {colore di sfondo : rgb ( 123 , 180 , 17 ) ;
}
Questo mostrerà il seguente risultato:
Ora aggiungiamo l'intestazione con il tag
e il nome della classe del pulsante ' pulsante ”, all'interno del tag .
HTML
< centro >
< h1 > Cambia il colore del pulsante < / h1 >
< pulsante classe = 'pulsante' > Cliccami < / pulsante >
< / centro >
Successivamente, ci sposteremo in CSS e stilizzeremo il pulsante e applicheremo :active su di esso. Per fare ciò, imposteremo lo stile del bordo come ' nessuno ' e dare imbottitura come ' 15px ”. Successivamente, imposta il colore del testo del pulsante come ' RGB(50, 0, 54) ” e il suo sfondo come “ RGB(177, 110, 149) ”, e il suo raggio come “ 15px ”:
.pulsante {
confine : nessuno ;
imbottitura : 15px ;
colore : rgb ( cinquanta , 0 , 54 ) ;
colore di sfondo : rgb ( 177 , 110 , 149 ) ;
raggio di confine : 15px ;
}
Questo mostrerà il seguente risultato:
Successivamente, applicheremo :active pseudo-classe sul pulsante come ' .pulsante: attivo ” e imposta il colore di un pulsante come “ RGB(200, 255, 0) ”:
.pulsante : attivo {
colore di sfondo : rgb ( 200 , 255 , 0 ) ;
}
Una volta implementato tutto il codice sopra, vai al file HTML ed eseguilo per verificare il risultato:
Dall'output, si può osservare che quando si fa clic sul pulsante, il suo colore cambia in base al codice colore RGB specificato.
Conclusione
Per cambiare il colore del pulsante facendo clic in CSS, il ' :attivo ” è possibile utilizzare la pseudo-classe. Più in particolare, può rappresentare l'elemento pulsante quando viene attivato. Usando questa classe, puoi impostare diversi colori dei pulsanti quando il mouse fa clic su di esso. Questo articolo ha spiegato la procedura per cambiare il colore del pulsante al clic in CSS.
HTML
< centro >< h1 > Cambia il colore del pulsante < / h1 >
< pulsante classe = 'pulsante' > Cliccami < / pulsante >
< / centro >
Successivamente, ci sposteremo in CSS e stilizzeremo il pulsante e applicheremo :active su di esso. Per fare ciò, imposteremo lo stile del bordo come ' nessuno ' e dare imbottitura come ' 15px ”. Successivamente, imposta il colore del testo del pulsante come ' RGB(50, 0, 54) ” e il suo sfondo come “ RGB(177, 110, 149) ”, e il suo raggio come “ 15px ”:
.pulsante {confine : nessuno ;
imbottitura : 15px ;
colore : rgb ( cinquanta , 0 , 54 ) ;
colore di sfondo : rgb ( 177 , 110 , 149 ) ;
raggio di confine : 15px ;
}
Questo mostrerà il seguente risultato:
Successivamente, applicheremo :active pseudo-classe sul pulsante come ' .pulsante: attivo ” e imposta il colore di un pulsante come “ RGB(200, 255, 0) ”:
.pulsante : attivo {colore di sfondo : rgb ( 200 , 255 , 0 ) ;
}
Una volta implementato tutto il codice sopra, vai al file HTML ed eseguilo per verificare il risultato:
Dall'output, si può osservare che quando si fa clic sul pulsante, il suo colore cambia in base al codice colore RGB specificato.
Conclusione
Per cambiare il colore del pulsante facendo clic in CSS, il ' :attivo ” è possibile utilizzare la pseudo-classe. Più in particolare, può rappresentare l'elemento pulsante quando viene attivato. Usando questa classe, puoi impostare diversi colori dei pulsanti quando il mouse fa clic su di esso. Questo articolo ha spiegato la procedura per cambiare il colore del pulsante al clic in CSS.