Come personalizzare il pulsante Invia con CSS

AGGIORNAMENTO: prova il video corso di Form Designer per creare fantastici stili di pulsanti di invio!

Sapevi che il verde e il blu sono i colori più rilassanti? Ecco perché vengono utilizzati dai siti Web più popolari per aiutare gli utenti a sentirsi a proprio agio navigando in quei siti. Anche i pulsanti di invio nei moduli web dovrebbero sembrare corretti perché è lì che le persone condividono le loro informazioni più sensibili.

Con questa guida imparerai come personalizzare i pulsanti di invio in modo da far sentire bene i tuoi visitatori quando inviano le loro informazioni e aumentare il numero di conversione.

1. Fai clic sull’icona Designer Moduli

2. Vai alla scheda “CSS” e incolla il seguente codice CSS o i tuoi codici CSS personalizzati.

.form-submit-button {
background: #0066A2;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold 15px arial, sans-serif;
text-shadow:none;
}

Ecco come apparirà dopo

Dettagli del codice CSS per il pulsante di invio

.form-submit-button – seleziona il pulsante di invio nel modulo.

background – Imposta il colore di sfondo dietro il testo.

color: determina il colore del testo.

border-style – Imposta lo stile dei bordi dei pulsanti di invio.

border-color – Imposta il colore dei bordi del pulsante di invio.

altezza: consente di impostare l’altezza del pulsante ed è indicata con pixel.

larghezza: consente di impostare la larghezza del pulsante ed è indicata con pixel.

font – Imposta le proprietà del font.

NOTA: non dimenticare di aggiungere punti e virgola (;) dopo ogni proprietà.

Pulsante Invia CSS3 e effetto al passaggio del mouse

Segui i passaggi per modificare il pulsante di invio come sopra. L’unica cosa che cambia è il codice.

Esempio CSS3 per un pulsante di invio:

.form-submit-button {
background: #B9DFFF;
color: #fff;
border: 1px solid #eee;
border-radius: 20px;
box-shadow: 5px 5px 5px #eee;
text-shadow:none;
}
.form-submit-button:hover {
background: #016ABC;
color: #fff;
border: 1px solid #eee;
border-radius: 20px;
box-shadow: 5px 5px 5px #eee;
text-shadow:none;
}

Ecco come appare.

ecco come appare passando il mouse sopra il tasto

Dettagli su ogni codice CSS3 per il pulsante di invio

.form-submit-button: hover – Questa è la classe quando il mouse è posizionato sul pulsante di invio. Ogni altro campo viene lasciato uguale tranne lo sfondo per mostrare cosa sta succedendo al passaggio del mouse.

border-radius – Arrotonda l’angolo dei pulsanti di invio.

box-shadow – Imposta un’ombra per il pulsante di invio.

text-shadow (non applicato all’esempio): imposta un’ombra per il testo all’interno del pulsante di invio.

Come e` andata? Per favore condividi i tuoi pensieri o suggerimenti nella sezione commenti qui sotto.