Un pulsante è una parte fondamentale dell'HTML che esegue varie attività. Usando i CSS, puoi progettare e definire lo stile del pulsante. Esistono diversi modi per progettare il pulsante, come colorare il pulsante, ridimensionare, passare il mouse e molti altri.

In questo articolo, prima impareremo come creare un pulsante, quindi cambiare il colore di un pulsante al passaggio del mouse.

Iniziamo!

Come modificare il colore del pulsante al passaggio del mouse in CSS?

In CSS, “ : passa il mouse ” viene utilizzato per cambiare il colore del pulsante al passaggio del mouse. “ : passa il mouse ” è una pseudo-classe che consente di modificare il comportamento degli elementi HTML quando ci si passa sopra con il mouse, come elementi come collegamenti, pulsanti, immagini e molti altri.

La sintassi di : passa il mouse è fornito di seguito.

Sintassi

Nella sintassi sopra fornita, ' un ” si riferisce all'elemento HTML dove il “ : passa il mouse ' viene applicata. In CSS, puoi impostare il comportamento al passaggio del mouse degli elementi HTML, come il colore, la dimensione e la larghezza dell'elemento.

Passaggio 1: crea Div e Button

Nell'HTML, per prima cosa, creeremo un div e aggiungeremo un'intestazione con

e un pulsante usando un tag. Qui assegneremo il nome della classe del pulsante come ' btn ' e il testo del pulsante come ' Passa su di me ”.

HTML

Di seguito si riporta l'esito del suddetto codice. Puoi vedere che l'intestazione e il pulsante sono stati creati:

Ora, passa al CSS per applicare uno stile al div e al pulsante uno per uno.

Passaggio 2: pulsante stile e div

Per prima cosa, modelleremo il contenitore creato usando ' div ”. Quindi, imposteremo l'altezza del div come ' 250px ” e il colore di sfondo come “ RGB(199, 173, 192) ”. Useremo anche la proprietà border per regolare il bordo del div, larghezza come ' 5px ”, stile come “ solido ”, e colora come “ RGB(40, 2, 55) ”.

CSS

L'output indicato di seguito indica che lo stile aggiunto è stato applicato correttamente al div:

Nel passaggio successivo, modelleremo il pulsante utilizzando CSS.

Ora modelleremo il pulsante usando ' .btn ” per accedere al pulsante creato in HTML. Successivamente, nasconderemo il bordo del pulsante impostando ' nessuno ” come valore della proprietà di confine. Successivamente, regoleremo la dimensione del carattere su ' di grandi dimensioni ” e il riempimento del pulsante su “ 10px ” per creare spazi tra il contenuto del pulsante e il bordo del pulsante. Alla fine, imposteremo il colore del testo e dello sfondo come ' RGB(50, 0, 54) ' e ' RGB(193, 54, 135) ”:

Il pulsante ora ha uno stile:

Inoltre, applicheremo ' : passa il mouse ” per cambiare il colore di un pulsante al passaggio del mouse.

Passaggio 3: cambia il colore del pulsante al passaggio del mouse

Ora useremo “ .btn: passa il mouse ” per collegare il pulsante con l'elemento di pseudo-classe hover. Di conseguenza, il passaggio del mouse verrà applicato al pulsante. Successivamente, imposteremo il colore di sfondo e il colore del testo del pulsante come ' RGB(66, 2, 41) ' e ' RGB(119, 255, 0) ”. Questi colori verranno applicati al pulsante quando si passa il mouse su di esso:

Nell'output fornito di seguito, puoi vedere che il colore del pulsante viene modificato quando il mouse passa sopra di esso:

Questo è tutto! Abbiamo spiegato il metodo per cambiare il colore del pulsante al passaggio del mouse usando CSS.

Conclusione

Per cambiare il colore di un pulsante al passaggio del mouse, ' : passa il mouse ” viene utilizzato l'elemento pseudo-classe. Per fare ciò, collega il pulsante con :hover e imposta il colore del pulsante, che cambierà quando passeremo con il mouse su di esso. In questo articolo abbiamo spiegato il metodo per cambiare il colore del pulsante al passaggio del mouse e ne abbiamo fornito un esempio.