HTML fornisce elementi diversi; uno di questi è il "pulsante", Che viene utilizzato per eseguire un'azione specifica nella pagina web. Usando CSS, è possibile modellare il pulsante in modi diversi, come le dimensioni, il colore, la forma, la forma e molti altri del pulsante del pulsante. Per fare ciò, possono essere utilizzate diverse proprietà CSS per modellare il pulsante in base ai requisiti.

Questo manuale ti insegnerà la procedura di modifica del colore del pulsante. Cominciamo!

Come cambiare il colore del pulsante in CSS?

Puoi cambiare il colore del pulsante usando "colore di sfondo"Proprietà e imposta il colore del pulsante in base alle tue preferenze. Fondamentalmente, il "colore di sfondo"La proprietà viene utilizzata per aggiungere il colore di sfondo degli elementi HTML.

Sintassi

La sintassi della proprietà in background-color è la seguente:

Background-color: valore

Al posto del valore di sfondo, puoi impostare il colore che si desidera visualizzare dietro gli elementi HTML.

Ora, passiamo all'esempio pratico, in cui cambieremo il colore del pulsante.

Esempio

Innanzitutto, impara a creare un pulsante in Div e quindi modificare il suo colore usando CSS.

Passaggio 1: Crea div e pulsante

In HTML, creeremo un div e assegneremo il nome della classe come "div". All'interno del tag, aggiungeremo un'intestazione usando il

Tag e un pulsante usando il tag con il nome della classe come "btn". Il testo che verrà visualizzato sul pulsante è "Colore".

Html

Modifica il colore del pulsante in CSS

Colore

Si può vedere che viene creato il div e un pulsante:

Ora passeremo al passaggio successivo per modellare il div creato usando CSS.

Passaggio 2: Style Div

Qui, usa ".div"Per accedere al contenitore creato e impostare la sua altezza come"200px". Quindi, modella il div usando il "confine"Proprietà per impostare il confine attorno al div. La larghezza del confine è impostata come "4px", Il suo stile come"scanalatura”, E colore come"RGB (1, 34, 77)". Imposteremo la forma del bordo con il "raggio di confine"Proprietà e impostare il suo valore come"25px". Dopodiché, usa il “colore di sfondo"Proprietà per impostare il colore di sfondo del div e assegnare il valore del colore come"RGB (210, 243, 241)".

CSS

.div
Altezza: 200px;
Bordo: 4px scanalatura RGB (1, 34, 77);
raggio di confine: 25px;
Background-color: RGB (210, 243, 241);

Di conseguenza, il contenitore creato viene disegnato:

Passiamo all'ultimo passaggio, in cui coloriamo il pulsante usando CSS.

Passaggio 3: Modifica il colore del pulsante

Dopo aver accumulato il Div in CSS, useremo ".btn"Per accedere al pulsante creato in HTML. Quindi, imposta il valore della proprietà di confine come "nessuno"Per rimuovere lo stile bordo predefinito. Specificare il valore della proprietà del raggio di frontiera come "15px"Per impostare la forma del pulsante

Ottimi il testo del pulsante usando la proprietà di dimensioni di carattere e imposta il suo valore come "xx-grande". Dopodiché, useremo l'imbottitura come "10px"Per creare spazio tra il testo aggiunto e il bordo del pulsante.

Alla fine, usa la proprietà del colore e imposta il suo valore come "RGB (255, 251, 7)"Per colorare il testo e la proprietà di sfondo come"RGB (43, 87, 84)"Per impostare il colore del pulsante:

.btn
confine: nessuno;
raggio di confine: 15px;
Font-size: xx-large;
imbottitura: 10px;
Colore: RGB (255, 251, 7);
Background-color: RGB (43, 87, 84);

L'output fornito ha dichiarato che il colore del pulsante è cambiato correttamente:

Abbiamo spiegato il metodo per cambiare il colore del pulsante in CSS.

Conclusione

In CSS, il “colore di sfondo"La proprietà viene utilizzata per impostare il colore del pulsante. Usando questo, puoi impostare il colore in base alla tua scelta e progettare elegantemente un pulsante. È inoltre possibile utilizzare proprietà diverse per migliorare l'aspetto del pulsante usando CSS. In questa guida, abbiamo spiegato il metodo per cambiare il colore del pulsante in CSS e fornito un esempio per la tua migliore comprensione.