Il pulsante è un elemento cliccabile utilizzato per eseguire un'azione specifica. Usando CSS, è possibile impostare diversi stili di pulsanti Uno di essi è cambiare il colore di un pulsante su Click. Il colore di un pulsante può essere impostato usando il CSS ":attivo"Classe pseudo.

Questo blog ti insegnerà la procedura relativa alla modifica del colore del pulsante su Click. Per questo, in primo luogo, scopri la pseudo-Classe attiva.

Quindi, iniziamo!

Cosa è ": attivo" in CSS?

Cambiare il colore del pulsante su Click in CSS è possibile con l'aiuto di ":attivo"Classe pseudo. 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 quando viene premuto il tasto del mouse.

Sintassi

A: attivo
Colore: verde;

"UN"Si riferisce all'elemento HTML su cui verrà applicata la classe attiva.

Andiamo verso un esempio per capire il concetto dichiarato.

Come modificare il colore del pulsante su Click in CSS?

Per modificare il colore di un pulsante su Click, prima, crea un pulsante in un file HTML e assegna il nome della classe "btn".

Html

Pulsante

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
Background-color: RGB (0, 255, 213);

Successivamente, applica: Pseudo-Classe attiva sul pulsante come ".BTN: attivo"E imposta il colore del pulsante che verrà visualizzato nel suo stato attivo come"RGB (123, 180, 17)":

.btn: attivo
Background-color: RGB (123, 180, 17);

Questo mostrerà il seguente risultato:

Ora, aggiungiamo l'intestazione con

Nome classe e tag e pulsanti "pulsante", All'interno del tag.

Html

Modifica colore del pulsante

Cliccami

Successivamente, passeremo a CSS e modelleremo il pulsante e applicheremo: attivo su di esso. Per farlo, imposteremo lo stile di confine come "nessuno"E dare imbottitura come"15px". Successivamente, imposta il colore del testo del pulsante come "RGB (50, 0, 54)"E il suo background come"RGB (177, 110, 149)", E il suo raggio come"15px":

.pulsante
confine: nessuno;
imbottitura: 15px;
Colore: RGB (50, 0, 54);
Background-color: RGB (177, 110, 149);
raggio di confine: 15px;

Questo mostrerà il seguente risultato:

Successivamente, applicheremo: Pseudo-Classe attiva sul pulsante come ".Pulsante: attivo"E imposta il colore di un pulsante come"RGB (200, 255, 0)":

.Button: attivo
Background-color: RGB (200, 255, 0);

Una volta implementato tutto il codice sopra, vai al file HTML ed eseguilo per controllare il risultato:

Dall'output, può essere osservato quando il pulsante viene fatto clic sul colore viene modificato in base al codice colore RGB specificato.

Conclusione

Per modificare il colore del pulsante su CLIC in CSS, il “:attivo"Classe pseudo può essere utilizzata. Più specificamente, può rappresentare l'elemento pulsante quando viene attivato. Utilizzando questa classe, è possibile impostare colori di pulsanti diversi quando il mouse fa clic su di essa. Questo articolo ha spiegato la procedura per la modifica del colore del pulsante su CLORE in CSS.