Un utente scorre la pagina, sfoglia titoli, immagini ed elenchi. Il pulsante «Registrati» si mimetizza con lo sfondo e passa inosservato. Il modulo sottostante non riceve invii da tre giorni. Uno scenario classico: il pulsante c’è, ma i clic no.

La soluzione non è un redesign da 500 $ né riscrivere la landing page. Bastano trenta righe di CSS. Un’animazione discreta (un tremolio, un battito o un bagliore) fa notare il pulsante senza lampeggiamenti fastidiosi. Una ricerca del Nielsen Norman Group conferma che gli elementi in movimento catturano l’attenzione 3 volte più rapidamente di quelli statici, ma solo quando il movimento è giustificato e non compete con il contenuto principale.

Ecco tre opzioni funzionanti di pulsanti CTA animati, con codice pronto all’uso. Da un semplice tremolio a un effetto combinato battito-bagliore. Copia e incolla.

💡 Panoramica rapida:

• Scheletro HTML: markup minimo del pulsante con una classe modificatrice, inseribile in qualsiasi modulo o landing page.
• Effetto tremolio: il pulsante vibra ogni 4 secondi tramite @keyframes, attirando l’attenzione sull’azione principale senza irritare l’utente.
• Effetto battito: un’ombra che pulsa delicatamente, alternativa per i siti in cui il tremolio risulta troppo aggressivo.
• Demo su CodePen: un esempio interattivo dove modificare i parametri e vedere i risultati prima di aggiungerli al sito.

Markup HTML: scheletro del pulsante animato

Il markup è volutamente semplice. Niente framework, solo HTML puro. Un pulsante, una classe.

1
<input type="submit" name="submit" value="Get Ticket!"
2
  class="animated-btn animated-btn--shake">

Tre punti da notare subito. Primo: type="submit" fa sì che il pulsante funzioni dentro qualsiasi modulo senza bisogno di JavaScript aggiuntivo. Secondo: value è il testo che vedrà l’utente. Cambialo con ciò che ti serve: «Scarica», «Registrati» o qualsiasi altra cosa. Terzo: la classe modificatrice animated-btn--shake controlla il tipo di animazione. Sostituiscila con --pulse o --glow per ottenere un effetto diverso senza toccare il markup.

Se inserisci il pulsante fuori da un modulo, avvolgilo in un <a href="..."> e sostituisci input con <button>. Gli stili qui sotto funzionano con entrambe le opzioni.

Animazione CSS: effetto tremolio

Il tremolio è il più evidente dei tre effetti. Il pulsante oscilla a destra e sinistra di 3-5 pixel ogni 4 secondi. L’utente scorre la pagina, coglie il movimento con la visione periferica e sposta lo sguardo sul pulsante. Quattro secondi bastano per evitare che l’animazione diventi spam fastidioso.

1
/* === Shake button === */
2
.animated-btn--shake {
3
  animation: shake 4s ease-in-out infinite;
4
  transform-origin: center center;
5
}
6
 
7
@keyframes shake {
8
  0%, 100%   { transform: translateX(0); }
9
  2%         { transform: translateX(-4px) rotate(-1deg); }
10
  4%         { transform: translateX(4px) rotate(1deg); }
11
  6%         { transform: translateX(-3px); }
12
  8%         { transform: translateX(3px); }
13
  10%        { transform: translateX(0); }
14
}

Analizziamo le scelte chiave. animation: shake 4s ease-in-out infinite: nel nostro esempio il ciclo completo dura diversi secondi, ma l’animazione è attiva solo per una frazione minima di quel tempo. Per il resto il pulsante resta fermo. Questo è importante: un tremolio costante irrita, mentre un movimento cadenzato attira.

transform-origin: center center fissa il punto di rotazione al centro, così il pulsante non «deriva» lateralmente durante la rotazione.

rotate() a 1 grado aggiunge realismo. Un semplice translateX risulta meccanico; una leggera inclinazione crea l’illusione di una forza fisica, come se qualcuno tirasse il pulsante con un filo.

Aggiungi lo stile in linea con il tuo design: colore di sfondo con background, arrotondamento degli angoli con border-radius, padding e dimensione del font con font-size. L’animazione non dipende dallo stile e funziona con qualsiasi colore e dimensione.

Variante: effetto battito

Il tremolio non è adatto ovunque. Sul sito di una banca corporate o di una clinica medica, un pulsante che vibra stona. Il battito offre un modo più pacato per attirare l’attenzione: l’ombra del pulsante si espande e si contrae dolcemente, creando un effetto «respiro».

1
/* === Pulse button === */
2
.animated-btn--pulse {
3
  animation: pulse 3s ease-in-out infinite;
4
}
5
 
6
@keyframes pulse {
7
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 139, 87, 0.5); }
8
  50%      { box-shadow: 0 0 0 12px rgba(46, 139, 87, 0); }
9
}

L’ombra si espande dal pulsante di 12 pixel e sfuma fino a diventare trasparente. Il ciclo è di 3 secondi, leggermente più veloce del tremolio, perché il battito è meno invadente e l’occhio tollera un ritmo più rapido.

Sostituisci il tuo colore in rgba(). La formula: prendi il colore principale del pulsante e imposta l’alfa a 0,5 nel keyframe iniziale e a 0 in quello finale. Per un pulsante verde, usa rgba(46, 139, 87, 0.5); per il blu, rgba(41, 128, 185, 0.5).

Puoi combinare tremolio e battito sullo stesso pulsante, ma lo sconsigliamo. Due movimenti simultanei entrano in conflitto e risultano disordinati. Scegline uno in base al carattere del sito e al pubblico.

CodePen: esempio interattivo

Abbiamo pubblicato su CodePen il codice pronto all’uso con entrambe le opzioni di animazione. Aprilo, modifica durata, colori, padding e osserva i risultati in tempo reale.

Integrarlo nel sito tramite CSS aggiuntivo (Aspetto → Personalizza → CSS aggiuntivo) richiede un minuto. Copia il blocco che ti serve, incollalo, salva. Un pulsante nel markup del tema o nel plugin per moduli erediterà gli stili tramite classe.

Se usi WordPress, il percorso è ancora più breve: vai al pannello di amministrazione, apri la pagina o l’articolo nell’editor, individua il pulsante e aggiungi la classe animated-btn animated-btn--shake nelle impostazioni del blocco. Inserisci gli stili nei CSS aggiuntivi e verranno caricati nel front-end senza modificare i file del tema.

Il video qui sopra è un tutorial pratico per creare l’effetto tremolio da zero. L’autore mostra il processo in tempo reale: dal markup alle rifiniture finali in DevTools (inglese, 4 minuti).

⁉️🤔 Domande frequenti

L’animazione rallenta il caricamento della pagina?

Trenta righe di CSS pesano meno di 1 KB anche senza compressione. Nessuna libreria aggiuntiva, niente JavaScript. Il tempo di caricamento della pagina non cambia. Per confronto: una singola icona Font Awesome pesa in media 2-3 KB.

L’animazione funziona su mobile?

Sì, transform e box-shadow sono accelerati via hardware su iOS e Android a partire dalle versioni del 2016. L’unica avvertenza: Safari prima della versione 15 a volte scatta con box-shadow durante repaint frequenti. Risolvi aggiungendo will-change: box-shadow al pulsante con battito.

Come disattivo l’animazione per utenti con disturbi vestibolari?

Avvolgi l’animazione in @media (prefers-reduced-motion: no-preference). Così, se l’impostazione «Riduci movimento» è attiva nel sistema operativo, il pulsante resterà statico. I browser moderni supportano questa media query dal 2019.

Posso attivare l’animazione solo al passaggio del mouse?

Sostituisci infinite con none nella proprietà animation, poi descrivi lo stato hover separatamente: .animated-btn:hover { animation: shake 0.4s ease-in-out; }. Il pulsante vibrerà una volta al passaggio del mouse e si fermerà. Funziona per le situazioni in cui l’animazione autonoma confligge con il design.

Perché il mio pulsante non si anima dopo aver incollato il codice?

Tre cause comuni: la classe è stata copiata in modo errato (verifica animated-btn--shake con due trattini); il file CSS del tema sovrascrive animation (aggiungi !important o aumenta la specificità del selettore); il pulsante è dentro un contenitore con overflow: hidden che taglia l’ombra del battito.

Animare o non animare: il verdetto finale

Effetto tremolio, effetto battito o pulsante statico: la scelta dipende dal contesto, non dalle mode. Una landing page commerciale con un unico pulsante CTA? Tremolio ogni 4 secondi, senza dubbio. Un pannello di amministrazione o una dashboard con decine di pulsanti a schermo? Lasciali statici e anima solo l’azione principale. Un sito corporate con un pubblico conservatore? Bagliore a battito, minimale e sobrio.

Una regola che abbiamo ricavato da decine di test A/B: un pulsante animato aumenta la conversione di qualche punto percentuale, a patto che l’animazione sia unica e non competa per l’attenzione con gli elementi vicini. Due pulsanti animati affiancati significano conversione più bassa, perché l’utente si confonde e non clicca nessuno dei due.

Copia il codice dalla sezione precedente, adatta colori e durata al tuo progetto. Se il risultato ti piace, dai un’occhiata alla nostra selezione di plugin per la cache. Ti aiuteranno a mantenere la velocità del sito anche con una dozzina di elementi animati nella pagina.