I pulsanti WordPress CSS permettono di personalizzare i collegamenti del sito senza installare un plugin dedicato. Con poche regole puoi aggiungere un effetto hover, una leggera ombra, angoli arrotondati e una transizione più fluida al passaggio del mouse. Il metodo funziona con l’editor a blocchi di WordPress e con il blocco Pulsanti, purché il tema consenta l’inserimento di CSS personalizzato. Le stesse proprietà possono essere adattate anche a pulsanti creati con HTML personalizzato o con page builder.

Come preparare un pulsante WordPress con una classe CSS

Il blocco Pulsanti di WordPress consente di creare un collegamento grafico senza scrivere codice HTML. Per applicare stili personalizzati, il pulsante deve avere una classe CSS riconoscibile, che collegherà l’elemento alle regole inserite nel pannello del tema.

Passo 1: inserire il blocco Pulsanti

Apri la pagina o l’articolo nell’editor di WordPress e aggiungi il blocco Pulsanti. Seleziona quindi il singolo pulsante all’interno del blocco, inserisci il testo visibile e aggiungi l’URL di destinazione.

Nel pannello laterale, apri la sezione Avanzate e individua il campo Classe CSS aggiuntiva. Inserisci, senza punto iniziale, questa classe:

pulsante-hover

La classe CSS aggiuntiva deve essere scritta senza spazi se identifica un singolo stile. Se il tema o un plugin assegna già classi al blocco, non è necessario rimuoverle.

Passo 2: aprire il pannello CSS aggiuntivo

Con un tema classico, il percorso più comune è Aspetto > Personalizza > CSS aggiuntivo. La voce può cambiare in base al tema installato e potrebbe non essere disponibile nei temi a blocchi.

Con un tema a blocchi, apri Aspetto > Editor, accedi a Stili e verifica la presenza del menu con i tre punti o della voce dedicata al CSS aggiuntivo. Alcuni temi a blocchi non espongono un campo CSS personalizzato nell’interfaccia di WordPress; in quel caso il codice può essere inserito nel foglio di stile del tema child o tramite un plugin specifico per CSS personalizzato.

Quale codice CSS usare per hover, ombra e bordi arrotondati

Il seguente codice crea un pulsante blu con testo bianco, angoli arrotondati, ombra e transizione. Il selettore .pulsante-hover .wp-element-button è adatto al blocco Pulsanti di WordPress quando la classe viene assegnata al blocco esterno.

.pulsante-hover .wp-element-button {
display: inline-block;
padding: 12px 24px;
background-color: #1769e0;
color: #ffffff;
border: 2px solid #1769e0;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(23, 105, 224, 0.25);
text-decoration: none;
font-weight: 600;
transition: background-color 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
}

.pulsante-hover .wp-element-button:hover {
background-color: #0f4fae;
border-color: #0f4fae;
box-shadow: 0 7px 16px rgba(15, 79, 174, 0.35);
transform: translateY(-2px);
}

.pulsante-hover .wp-element-button:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 3px;
}

La proprietà border-radius: 8px arrotonda gli angoli del pulsante. Un valore pari a 0 produce angoli squadrati, mentre valori elevati creano un effetto più arrotondato. Per un pulsante completamente ovale puoi usare border-radius: 999px.

La proprietà box-shadow aggiunge l’ombra esterna. Nel codice, i valori indicano rispettivamente lo spostamento orizzontale, lo spostamento verticale, la sfocatura e il colore con trasparenza. Un’ombra troppo scura può ridurre la leggibilità visiva, soprattutto su sfondi chiari.

La pseudo-classe :hover modifica il pulsante quando il puntatore passa sopra il collegamento. La proprietà transform: translateY(-2px) solleva leggermente il pulsante, mentre transition rende il cambiamento graduale invece che immediato.

Come personalizzare colori, forma e movimento

I pulsanti WordPress CSS possono essere adattati ai colori del logo e al contrasto del sito modificando i codici esadecimali. Il colore del testo deve mantenere un contrasto sufficiente con lo sfondo, soprattutto per i pulsanti che contengono parole di piccole dimensioni.

Puoi sostituire i valori principali in questo modo:

#1769e0 controlla il colore blu iniziale.
#0f4fae controlla il colore mostrato durante l’hover.
#ffffff definisce il colore del testo.
8px determina il raggio degli angoli.
0 4px 10px regola posizione e sfocatura dell’ombra.
translateY(-2px) determina quanto il pulsante si solleva.

Per un effetto più discreto, elimina la trasformazione e riduci l’ombra:

.pulsante-hover .wp-element-button:hover {
background-color: #0f4fae;
border-color: #0f4fae;
box-shadow: 0 4px 10px rgba(15, 79, 174, 0.25);
transform: none;
}

Per creare un pulsante a forma di pillola, usa invece:

.pulsante-hover .wp-element-button {
border-radius: 999px;
}

La regola :focus-visible è importante per chi naviga con tastiera. L’outline giallo viene mostrato quando il pulsante riceve il focus senza aggiungere un bordo permanente durante il normale utilizzo con il mouse.

Come usare lo stile con HTML personalizzato

Se il pulsante non proviene dal blocco Pulsanti ma da un blocco HTML personalizzato, la classe va inserita direttamente nel tag del collegamento. In questo caso puoi usare questo codice HTML:

<a class="pulsante-html" href="https://www.example.com">
Vai alla pagina
</a>

La classe viene applicata direttamente all’elemento <a>, quindi il CSS deve usare un selettore diverso da quello del blocco WordPress:

.pulsante-html {
display: inline-block;
padding: 12px 24px;
background-color: #1769e0;
color: #ffffff;
border: 2px solid #1769e0;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(23, 105, 224, 0.25);
text-decoration: none;
font-weight: 600;
transition: all 0.25s ease;
}

.pulsante-html:hover {
background-color: #0f4fae;
border-color: #0f4fae;
box-shadow: 0 7px 16px rgba(15, 79, 174, 0.35);
transform: translateY(-2px);
}

.pulsante-html:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 3px;
}

Il valore href deve contenere l’indirizzo reale della pagina di destinazione. Evita di usare un link vuoto o il solo simbolo #, perché il collegamento potrebbe riportare l’utente all’inizio della pagina senza eseguire un’azione utile.

Perché l’hover non appare su smartphone

L’effetto :hover dipende dal puntatore e non ha un comportamento equivalente garantito sui dispositivi touchscreen. Su smartphone e tablet il pulsante deve quindi rimanere riconoscibile anche senza l’animazione al passaggio del mouse.

Per ridurre i movimenti sui dispositivi o per gli utenti che hanno attivato la preferenza di movimento ridotto, puoi aggiungere questa regola:

@media (prefers-reduced-motion: reduce) {
.pulsante-hover .wp-element-button,
.pulsante-html {
transition: none;
}

.pulsante-hover .wp-element-button:hover,
.pulsante-html:hover {
transform: none;
}
}

Dopo aver salvato il CSS, verifica il pulsante nella versione desktop e mobile del sito. Se le modifiche non compaiono, svuota la cache di WordPress, del plugin di ottimizzazione e del browser, quindi controlla che il tema non sovrascriva le regole con selettori più specifici.

Un pulsante WordPress CSS ben progettato deve mantenere contrasto, leggibilità e riconoscibilità anche quando l’effetto hover non viene visualizzato.

Potrebbe interessarti anche:

FAQ

Sì. Puoi usare il blocco Pulsanti, assegnare una classe CSS aggiuntiva e inserire le regole in Aspetto > Personalizza > CSS aggiuntivo, se il tema rende disponibile questa voce.

La causa più comune è un selettore non corrispondente alla struttura del blocco o una regola del tema più specifica. Controlla che la classe sia stata inserita nel campo Classe CSS aggiuntiva e usa .pulsante-hover .wp-element-button.

Imposta border-radius: 999px nella regola CSS del pulsante. L’effetto sarà simile a una pillola, soprattutto quando il pulsante ha una larghezza determinata dal contenuto.

Gli schermi touchscreen non gestiscono l’hover come un computer con mouse. Il pulsante deve quindi essere già leggibile e distinguibile nello stato normale.

Rimuovi transform: translateY(-2px) dalla regola :hover oppure sostituiscilo con transform: none.

Altri articoli di questa serie: