Un pulsante è una parte fondamentale di HTML che svolge varie attività. Usando CSS, è possibile progettare e modellare il pulsante. Esistono diversi modi per progettare il pulsante, come colorare il pulsante, ridimensionamento, hover e molti altri.

In questo articolo, prima impareremo come creare un pulsante, quindi modificare il colore di un pulsante su.

Iniziamo!

Come cambiare il colore del pulsante su Hover in CSS?

In CSS, ": Hover"Viene utilizzato per cambiare il colore del pulsante su Hover. ": Hover"È una classe pseudo che consente di cambiare il comportamento degli elementi HTML quando un mouse su di esso, come elementi come collegamenti, pulsanti, immagini e molti altri.

La sintassi di : Hover è fornito di seguito.

Sintassi

Nella sintassi sopra fornita, "UN"Si riferisce all'elemento HTML in cui il": Hover" viene applicata. In CSS, è possibile impostare il comportamento del mouse degli elementi HTML, come il colore, le dimensioni e la larghezza dell'elemento.

Passaggio 1: creare div e pulsante

Nell'HTML, in primo luogo, creeremo un div e aggiungeremo una voce

e un pulsante che utilizza un tag. Qui, assegneremo il nome della classe del pulsante come "btn"E il testo del pulsante come"Hover su di me".

Html

Il risultato del codice sopra menzionato è riportato di seguito. Puoi vedere che sono creati l'intestazione e il pulsante:

Ora spostati al CSS per modellare il div e il pulsante uno per uno.

Passaggio 2: pulsante di stile e div

Innanzitutto, 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à del bordo per regolare il bordo del div, larghezza come "5px", Stile come"solido”, E colore come"RGB (40, 2, 55)".

CSS

L'output di seguito indicato indica che lo stile aggiunto viene applicato correttamente sul div:

Nel passaggio successivo, modelleremo il pulsante usando CSS.

Ora, modelleremo il pulsante usando ".btn"Per accedere al pulsante creato in HTML. Dopodiché, nasconderemo il bordo del pulsante impostando "nessuno"Come valore della proprietà bordo. Successivamente, regoleremo la dimensione del carattere su "grande"E l'imbottitura del pulsante a"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 in stile:

Inoltre, applicheremo ": Hover"Per cambiare il colore di un pulsante su Hover.

Passaggio 3: Modifica il colore del pulsante su Hover

Ora useremo ".BTN: Hover"Per collegare il pulsante con l'elemento pseudo-classico del mouse. Di conseguenza, il 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 un mouse su di esso:

Nell'output sotto fornito, puoi vederlo, il colore del pulsante viene modificato quando un mouse si libra su di esso:

Questo è tutto! Abbiamo spiegato il metodo per modificare il colore del pulsante su Hover usando CSS.

Conclusione

Per cambiare il colore di un pulsante su Hover, il “: Hover"Viene utilizzato l'elemento di classe pseudo. Per fare ciò, collega il pulsante con: passa e imposta il colore del pulsante, che cambierà quando ci literemo su di esso. In questo articolo, abbiamo spiegato il metodo per cambiare il colore del pulsante su Hover e ne ho fornito un esempio.