Attenzione!

Questo articolo contiene codice CSS ed è destinato agli sviluppatori. Offriamo questo codice per cortesia, ma non forniamo supporto per personalizzazioni del codice o sviluppo di terze parti.

Per ulteriore assistenza, consulta il tutorial di WPBeginner su come aggiungere CSS personalizzato.

Chiudi

Utilizzo del CSS per personalizzare il pulsante di invio

Aggiornato:
Visualizza Markdown

Introduzione

Interessato a utilizzare i CSS per personalizzare il pulsante Invia? I CSS hanno un potenziale immenso per vari aspetti del tuo sito e in questo tutorial ti forniremo esempi pratici di come sfruttare le capacità dei CSS per trasformare l'aspetto del tuo pulsante Invia.

Per questo tutorial, non ci addentreremo nella creazione di moduli. Se hai bisogno di una guida su come creare il tuo modulo, fai riferimento a questa guida informativa.

Nuovo ai CSS? I nostri amici di WPBeginner forniscono un'ottima definizione e utili esempi. Scopri di più su questo argomento tramite la loro pagina del glossario informativo.

Tutti gli esempi in questo tutorial ti forniranno i CSS per cambiare il tuo pulsante per tutti i moduli, ma anche per moduli individuali.

Per imparare come incorporare i CSS nel tuo sito web, fai riferimento a questo tutorial. Se hai bisogno di una guida su come trovare l'ID del tuo modulo, consulta questo tutorial.

Pulsante a larghezza intera

In questo caso, miriamo a far corrispondere la larghezza del pulsante Invia ai campi del nostro modulo. Per raggiungere questo obiettivo, applicheremo i seguenti CSS.

Per singolo modulo

Questo esempio prende di mira solo il modulo con l'ID 23.

button#wpforms-submit-23 {
    width: 100%;
}

Per tutti i moduli

Questo esempio prende di mira tutti i WPForms.

button.wpforms-submit {
    width: 100% !important;
}

Effetto pulsante premuto per un singolo modulo

Utilizzando i seguenti CSS, faremo in modo che il pulsante appaia premuto quando viene cliccato.

Per un singolo modulo

Questo esempio prende di mira solo il modulo con l'ID 23.

button#wpforms-submit-23 {
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #b95d52;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

button#wpforms-submit-23:hover {
	background-color: #55555e;
}

button#wpforms-submit-23:active {
  background-color: #55555e;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

Per tutti i moduli

Questo esempio prende di mira tutti i WPForms.

button.wpforms-submit {
  display: inline-block !important;
  font-size: 24px !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  outline: none !important;
  color: #fff !important;
  background-color: #b95d52 !important;
  border: none !important;
  border-radius: 15px !important;
  box-shadow: 0 9px #999 !important;
}

button.wpforms-submit:hover {
	background-color: #55555e !important;
}

button.wpforms-submit:active {
  background-color: #55555e !important;
  box-shadow: 0 5px #666 !important;
  transform: translateY(4px) !important;
}

questo css farà apparire il pulsante di invio premuto quando cliccato

Invia con 2 righe di testo

Per questo esempio, avremo un pulsante con 2 righe di testo.

Per un singolo modulo

Questo esempio prende di mira solo il modulo con l'ID 23.

button#wpforms-submit-23 {
    max-width: 20%;
    line-height: 1.2em;
    height: auto;
}

Per tutti i moduli

Questo esempio prende di mira tutti i WPForms.

button.wpforms-submit {
    max-width: 20% !important;
    line-height: 1.2em !important;
    height: auto !important;
}

con questo CSS puoi far apparire il pulsante di invio su 2 righe di testo

Animazione al passaggio del mouse

Per questo esempio, introdurremo una doppia freccia al passaggio del mouse sul pulsante tramite il codice content: '\00bb'; nei CSS. Per maggiori informazioni su come trovare il codice HTML corretto per il tuo simbolo, consulta la documentazione di W3C Schools.

Potresti cambiare questa icona con qualsiasi icona basata su font come quelle che si trovano in questo tutorial.

Per un singolo modulo

Questo esempio prende di mira solo il modulo con l'ID 23.

button#wpforms-submit-23 {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button#wpforms-submit-23:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}

button#wpforms-submit-23:hover {
  padding-right: 25px;
}

button#wpforms-submit-23:hover:after {
  opacity: 1;
  right: 50px;
}

Per tutti i moduli

Questo esempio prende di mira tutti i WPForms.

button.wpforms-submit {
  border-radius: 4px !important;
  border: none !important;
  color: #FFFFFF !important;
  text-align: center !important;
  width: 200px !important;
  transition: all 0.5s !important;
  cursor: pointer !important;
  margin: 5px !important;
  cursor: pointer !important;
  display: inline-block !important;
  position: relative !important;
  transition: 0.5s !important;
}

button.wpforms-submit:after {
  content: '\00bb' !important;
  position: absolute !important;
  opacity: 0 !important;
  top: 11px !important;
  right: 0 !important;
  transition: 0.5s !important;
}

button.wpforms-submit:hover {
  padding-right: 25px !important;
}

button.wpforms-submit:hover:after {
  opacity: 1 !important;
  right: 50px !important;
}

questo CSS ti darà un effetto di animazione quando passi il mouse sopra il pulsante

Cambiare il colore

Per questo esempio, cambieremo il colore del pulsante. Cambieremo anche la dimensione del testo, il colore del testo e il font-family in questo esempio.

Per un singolo modulo

Questo esempio prende di mira solo il modulo con l'ID 23.

button#wpforms-submit-23 {
    font-family: roboto;
    font-size: 22px;
    background-color: #b95d52;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: unset;
    border: 1px solid transparent;
    background: unset;
    background-color: #b95d52;
}

button#wpforms-submit-23:hover {
    background-color: #ffffff;
    border: 1px solid #b95d52;
    opacity: 1;
    color: #b95d52;
}

Per tutti i moduli

Questo esempio prende di mira tutti i WPForms.

button.wpforms-submit {
    font-family: roboto !important;
    font-size: 22px !important;
    background-color: #b95d52;
    text-transform: uppercase;
    color: #ffffff !important;
    box-shadow: unset !important;
    border: 1px solid transparent !important;
    background: unset !important;
    background-color: #b95d52 !important;
}

button.wpforms-submit:hover {
    background-color: #ffffff !important;
    border: 1px solid #b95d52 !important;
    opacity: 1 !important;
    color: #b95d52 !important;
}

questo pulsante di esempio ha cambiato il colore, lo sfondo, la dimensione del carattere, la famiglia del carattere e tutte le maiuscole per il testo

Pulsante con box-shadow

Questo esempio ti mostrerà come applicare un box-shadow al pulsante utilizzando i seguenti CSS.

Per un singolo modulo

Questo esempio prende di mira solo il modulo con l'ID 23.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

In alternativa, potresti fornire il box-shadow solo al passaggio del mouse utilizzando questi CSS per il modulo.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

button#wpforms-submit-23:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

Per tutti i moduli

Questo esempio prende di mira tutti i WPForms.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

E ancora, come nell'esempio precedente, potresti applicare il box-shadow solo al passaggio del mouse.

button.wpforms-submit {
    background-color: #b95d52 !important;
    border: none !important;
    color: white !important;
    padding: 10px 30px !important;
    text-align: center;
    text-decoration: none !important;
    display: inline-block;
    font-size: 16px !important;
    margin: 4px 2px !important;
    cursor: pointer !important;
    -webkit-transition-duration: 0.4s !important;
    transition-duration: 0.4s !important;
}

button.wpforms-submit:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19) !important;
}

in questo esempio CSS stiamo mostrando box-shadow sul pulsante sempre o solo al passaggio del mouse a seconda dello snippet che utilizzi

E questi sono solo alcuni esempi di quanto sia facile personalizzare il pulsante di invio utilizzando i CSS. Vorresti anche personalizzare le etichette dei tuoi moduli? Dai un'occhiata al nostro tutorial su Come aggiungere immagini prima o dopo le etichette dei tuoi moduli.

FAQ

D: Posso usare questi CSS anche per i pulsanti di interruzione di pagina?

R: Assolutamente, per utilizzare uno qualsiasi di questi esempi con i pulsanti standard quando si utilizza il pulsante Page Breakbutton.wpforms-page-button.

In alternativa, se volessi prendere di mira solo un singolo modulo, useresti invece la classe CSS form#wpforms-form-3221 button.wpforms-page-button, e ricordati solo di aggiornare l'ID del modulo per farlo corrispondere al tuo.

Ad esempio, l'esempio di Animazione al passaggio del mouse mostrato sopra per il pulsante Invia, faremo lo stesso anche per i pulsanti di interruzione di pagina.

Questo CSS è per un modulo specifico, l'ID del modulo 3221. Se desideri mantenerlo per un singolo modulo, dovrai aggiornare il 3221 per corrispondere al tuo ID. Per aiuto su come trovare il tuo ID modulo, consulta la nostra utile documentazione.

form#wpforms-form-3221 button.wpforms-page-button {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
 
form#wpforms-form-3221 button.wpforms-page-button:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}
 
form#wpforms-form-3221 button.wpforms-page-button:hover {
  padding-right: 25px;
}
 
form#wpforms-form-3221 button.wpforms-page-button:hover:after {
  opacity: 1;
  right: 50px;
}

Questo CSS sarebbe per tutti i moduli.

button.wpforms-page-button {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
 
button.wpforms-page-button:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}
 
button.wpforms-page-button:hover {
  padding-right: 25px;
}
 
button.wpforms-page-button:hover:after {
  opacity: 1;
  right: 50px;
}

ecco un esempio per cambiare i pulsanti di interruzione di pagina

Taggato:
Ancora bloccato? Come possiamo aiutarti?
Ultimo aggiornamento il 29 ago 2023