### [Come cambiare il colore del pulsante di invio](https://wpforms.com/developers/how-to-change-the-submit-button-color/)
**Pubblicato:** 10 ottobre 2019
**Autore:** Umair Majeed
**Estratto:** Questo tutorial ti mostrerà come usare il CSS per cambiare il colore del pulsante di invio sul tuo WPForms.
**Contenuto:**
Vuoi personalizzare il colore del pulsante di invio del tuo modulo per adattarlo al marchio del tuo sito web? Mentre WPForms 1.8.1+ offre la personalizzazione del colore integrata tramite l'editor a blocchi, puoi anche ottenerlo utilizzando CSS personalizzato per un controllo più preciso.
Questa guida ti mostrerà come cambiare il colore del pulsante di invio utilizzando il CSS.
Con il rilascio di WPForms 1.8.1, ora puoi facilmente cambiare il colore del pulsante di invio senza usare il CSS semplicemente aggiungendo il modulo alla tua pagina usando un editor a blocchi. Con questa funzionalità di stile del modulo, puoi stilizzare i tuoi moduli senza scrivere alcun CSS. Per saperne di più, [dai un'occhiata a questa utile documentazione](https://wpforms.com/how-to-style-wpforms-using-the-block-editor/ "Come stilizzare WPForms usando l'editor a blocchi").
Tuttavia, puoi anche usare il CSS personalizzato per ottenerlo e per questo tutorial, questo è il metodo che useremo per cambiare lo stile del colore del pulsante **Invio**.
## Impostazione del modulo
Per iniziare, apri il generatore di moduli creando un nuovo modulo o modificando uno esistente. Aggiungi i campi del modulo desiderati secondo necessità.
Per assistenza nella creazione di un modulo, consulta la nostra guida completa su [come creare il tuo primo modulo](https://wpforms.com/docs/creating-first-form/).
## Aggiunta del codice CSS
Il seguente snippet CSS cambierà il colore del tuo pulsante di invio:
Se hai bisogno di assistenza su come e dove aggiungere CSS al tuo sito, consulta il nostro tutorial su [aggiungere stili CSS personalizzati](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
Il CSS sopra cambierà lo sfondo del colore del pulsante di invio in blu ([\#066AAB](https://www.htmlcsscolor.com/hex/066aab)) con testo bianco su tutti i pulsanti **Invio** di WPForms sul tuo sito.
I colori in questo CSS sono definiti usando codici esadecimali, di cui puoi [leggere di più in questa documentazione](http://www.htmlcsscolor.com/)
Nota: per ulteriori modifiche di stile al pulsante di invio, come gli stili al passaggio del mouse, consulta [il nostro tutorial sullo stile del pulsante di invio](https://wpforms.com/docs/how-to-customize-the-submit-button/).
## Personalizzazione del codice
Per usare colori diversi, sostituisci i codici esadecimali nel codice:
Alla **riga 7**, sostituisci `#066AAB` con il colore del pulsante desiderato.
Alla **riga 8**, sostituisci `#`066AAB`` con lo stesso colore per abbinare il bordo.
Alla **riga 14**, sostituisci `#04446E` con il colore di hover desiderato (tipicamente una tonalità più scura del colore del pulsante).
Ad esempio, per creare un pulsante rosso potresti usare:
```
background-color: #ff0000 !important;
border-color: #ff0000 !important;
```
## Domande frequenti
#### D: Perché questo CSS non funziona per me?
**R:** Se non vedi le tue modifiche, cancella prima la cache del tuo browser. Se ancora non funziona, il tuo tema potrebbe sovrascrivere gli stili. Prova ad aggiungere `!important` alle tue regole CSS come mostrato nel nostro esempio. Per ulteriore aiuto, consulta la nostra [guida alla risoluzione dei problemi CSS](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/).
#### D: Funzionerà anche per i pulsanti Avanti e Indietro?
**R:** Se stai usando un campo **Pausa Pagina** nel tuo modulo e stai usando i pulsanti **Avanti** e **Indietro** per la navigazione, useremo del CSS che renderà tutti questi pulsanti con lo stesso stile esatto. Copia semplicemente questo CSS sul tuo sito.
```
.wpforms-form button[type=submit], button.wpforms-page-button {
background-color: #024488 !important;
border-color: #024488 !important;
color: #fff !important;
transition: background 0.3s ease-in-out;
}
.wpforms-form button[type=submit]:hover, button.wpforms-page-button:hover {
background-color: #022B57 !important;
}
```
#### D: Posso puntare solo a uno dei miei moduli?
**R:** Se volessi cambiare solo un modulo, dovresti semplicemente puntare all'ID del modulo nel tuo CSS. In questo esempio, puntiamo all'ID modulo **999** per il pulsante **Invio** e per i pulsanti **Avanti** e **Indietro** dal campo **Pausa Pagina**.
Dovrai aggiornare il **999** per corrispondere al tuo ID modulo.
Se non sei sicuro di dove trovare il tuo ID modulo, consulta la nostra guida su [come individuare l'ID del campo e del modulo](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
```
button#wpforms-submit-999, form#wpforms-form-999 button.wpforms-page-button {
background-color: #024488;
border-color: #024488;
color: #fff;
transition: background 0.3s ease-in-out;
}
button#wpforms-submit-999:hover, form#wpforms-form-999 button.wpforms-page-button:hover {
background-color: #022B57;
}
```
E questo è tutto! Ora hai cambiato il colore del tuo pulsante di invio. Successivamente, vorresti usare il CSS per personalizzare il pulsante **Invio** in altri modi? Dai un'occhiata al nostro tutorial su [come usare il CSS per personalizzare il pulsante di invio](https://wpforms.com/developers/using-css-to-personalize-the-submit-button/ "Come usare il CSS per personalizzare il pulsante di invio").
**Categorie:** Stile
**Tag:** CSS
---