Se ci pensi, i pulsanti sono la linfa vitale del tuo business online. Puoi avere il sito web più bello del mondo, i contenuti più curati e la strategia di marketing più raffinata... ma se i tuoi pulsanti "Acquista ora", "Prenota un appuntamento" o "Chatta su WhatsApp" non funzionano come dovrebbero, tutto il resto crolla come un castello di carte.
Un pulsante web non è solo un semplice quadrato con testo e colore: è un elemento fondamentale dell'interazione. È il ponte tra curiosità e azione, tra "Sono interessato" e "Ti pago". Progettarlo bene è quasi un'arte, poiché combina psicologia, design visivo, esperienza utente (UX), accessibilità e persino metriche aziendali.
Qui analizzeremo, in modo molto pratico, come creare pulsanti per siti web che non solo siano esteticamente gradevoli, ma che incoraggino anche i clic. Parleremo dei fondamenti, delle micro-interazioni che fanno la differenza, di dove posizionarli sul tuo sito web per massimizzare le conversioni e, naturalmente, di come crearli nella pratica: dal puro HTML e CSS all'utilizzo di page builder visuali per WordPress come Elementor, Divi o Gutenberg.
Vedremo anche come framework come Bootstrap e Tailwind semplifichino la vita con pattern predefiniti e come ricordare l'aspetto più importante di tutti: l'accessibilità. Perché se il tuo pulsante non può essere utilizzato da tutti, il tuo design non è completo.
Un errore classico: pulsanti che sembrano semplice testo o link che sembrano pulsanti. L'affordance , in sostanza, è ciò che "urla" ciò che è. Un pulsante dovrebbe apparire cliccabile senza che l'utente debba pensarci due volte. Bordi ben definiti, un contrasto adeguato, ombreggiature o un leggero rilievo aiutano il visitatore a identificare rapidamente dove interagire.
La gerarchia visiva fa il resto: il pulsante principale (CTA - Call to Action) deve risaltare rispetto agli altri elementi. Se tutto sul tuo sito web ha la stessa luminosità, niente risalta.
Esempio pratico :
Pulsante perso nel mezzo di un blocco di testo (nessuno se ne accorge).
Pulsante con contrasto e spazio bianco attorno (tutti lo vedono).
Un pulsante "Invia" è funzionale. Ma un pulsante con la scritta "Voglio un preventivo" o "Scarica la mia guida gratuita" è persuasivo. Il microcopy , ovvero il piccolo testo all'interno del pulsante, ha un impatto enorme sulla conversione.
Le tre regole d'oro:
Verbo d'azione : che indica chiaramente cosa accadrà.
Beneficio diretto : ciò che l'utente ottiene da quel clic.
Senza attriti : evita dubbi del tipo "cosa succederà dopo?".
Pulsante generico | Pulsante ottimizzato |
|---|---|
Invia | Voglio il mio preventivo |
Comprare | Acquista ora con spedizione gratuita |
RICHIEDI INFORMAZIONI | Scopri come funziona in 2 minuti |
Il colore non è casuale. È legato alla psicologia, ma soprattutto alla visibilità . Il pulsante principale dovrebbe avere un colore che contrasti con lo sfondo e che allo stesso tempo sia in linea con la tua identità visiva.
Ad esempio, se il tuo sito web è prevalentemente blu, non posizionare il pulsante principale su uno sfondo blu scuro. Gioca con colori complementari (blu + arancione, verde + viola) o con tonalità che mantengano la coerenza senza perdere contrasto.
Inoltre, non dimenticate le linee guida sull'accessibilità (WCAG) : il rapporto di contrasto minimo per il testo normale deve essere di 4.5:1. Questo garantisce che anche le persone ipovedenti possano identificare il pulsante.
Su dispositivi mobili, un pulsante non dovrebbe costringere l'utente a zoomare. Google raccomanda una dimensione minima dell'area di tocco di 44 pixel di altezza per 44 pixel di larghezza . E non è solo la dimensione a contare, ma anche lo spazio circostante : se l'utente può toccare lo schermo senza il timore di premere accidentalmente un altro elemento, l'esperienza migliora.
Anche le forme comunicano: i pulsanti arrotondati tendono a essere percepiti come più amichevoli; quelli rettangolari, come più formali o aziendali. L'importante è la coerenza: non mescolare cinque stili di pulsanti sullo stesso sito web.
Un pulsante statico è come un semaforo che non cambia mai colore: crea confusione. Gli stati vengono utilizzati per far sapere immediatamente all'utente che la sua azione avrà una risposta.
Al passaggio del mouse: cambia colore, aggiunge un'ombra o sottolinea il testo. Non esagerare con animazioni troppo elaborate; un piccolo feedback visivo è sufficiente.
Attivo (quando cliccato): simula un "affondamento" o una pressione. Ciò conferma che il clic è stato registrato.
Messa a fuoco (quando si utilizza la tastiera): bordo visibile, solitamente blu. Elemento chiave per l'accessibilità.
Disabilitato: tonalità di grigio, contrasto ridotto, a indicare che l'azione non è ancora disponibile.
📌 Esempio pratico :
Passa il mouse sopra: pulsante blu che diventa più chiaro quando ci passi sopra con il mouse.
Attivo: pulsante che “affonda” un paio di pixel.
Messa a fuoco: bordo giallo marcato.
Disabilitato: stesso pulsante in grigio chiaro.
Gli utenti odiano l'incertezza. Se cliccano su un pulsante e non succede nulla, probabilmente faranno doppio clic (o chiuderanno la pagina). Ed è qui che sorgono i problemi: acquisti duplicati, moduli inviati due volte, errori.
La soluzione: un feedback immediato.
Un caricatore all'interno del pulsante ("Caricamento in corso..." con una rotella rotante).
Un cambio di testo istantaneo : "Invio in corso..." che poi si trasforma in "Fatto!".
Oppure anche una conferma visiva : un segno di spunta animato ✅ dopo aver completato l'azione.
Esempio:
Pulsante "Prenota ora" → quando cliccato va su "Elaborazione..." con un'icona animata → poi "Prenotazione confermata!".
Questo tipo di micro-interazioni non solo prevengono gli errori, ma trasmettono anche professionalità e attenzione all'esperienza utente . E sì, anche Google le apprezza perché influiscono sulla soddisfazione dell'utente , un aspetto sempre più importante per la SEO.
Ecco un errore classico: inserire il pulsante "Acquista ora" non appena la pagina si carica. Funziona? Solo se l'utente ha già preso una decisione (ad esempio, prenotare un taxi o acquistare dei biglietti). Ma nella maggior parte dei casi, chiedere un'azione senza creare aspettativa è come fare una proposta di matrimonio al primo appuntamento: un "no" assicurato.
Nella parte superiore della pagina (visibile senza scorrere): ideale per call-to-action semplici e immediate, come "Scarica la guida" o "Chiama ora".
Dopo aver offerto valore: se il tuo sito web vende un corso, un software o un servizio più complesso, prima spiega i vantaggi, mostra le testimonianze dei clienti e poi invita all'azione.
👉 L'ideale: combinare entrambi. Un pulsante visibile in alto per chi lo desidera + CTA posizionati strategicamente nei punti chiave lungo lo scroll.
L'occhio umano analizza le pagine web seguendo degli schemi:
Schema F: tipico di blog o pagine con molto testo. I pulsanti sono ben posizionati sul lato sinistro o alla fine delle sezioni.
Schema a Z: più visivo, utilizzato nelle landing page moderne. Le call to action (CTA) si trovano solitamente alla fine di ogni "diagonale" della Z.
A ciò si aggiungono risorse quali:
Sticky bars: un pulsante fisso nella parte inferiore dello schermo del cellulare, come "Prenota ora", sempre a portata di mano.
Call to Action secondarie: se la tua call to action principale è "Assumi", aggiungi una call to action secondaria meno impegnativa come "Scopri di più" o "Prenota una demo". In questo modo, non perderai coloro che non sono ancora pronti per l'azione principale.
L'80 % del traffico verso la maggior parte dei siti web proviene da dispositivi mobili. Dove teniamo solitamente i pollici? In basso. Dove mettiamo i pulsanti? Spesso... in alto 🙃. Un errore da manuale.
Posiziona le CTA nella parte inferiore o all'interno dell'area attiva del pollice.
Utilizza dimensioni appropriate: almeno 44x44 pixel (come raccomandato da Apple) in modo che siano cliccabili senza dover ingrandire.
Evita di posizionarli troppo vicini tra loro: pulsanti troppo vicini sui dispositivi mobili = clic errati.
Il più elementare e universale: un pulsante con HTML e CSS. Qui la cosa importante è differenziare un bottone reale (<button>) di un collegamento simile a un pulsante (<a>)Entrambe sono valide, ma hanno contesti diversi:
<button>: per azioni all'interno di moduli o che attivano un evento JS.
<a> con href: per la navigazione, il reindirizzamento o il download.
Con CSS puoi giocare con:
Colori e sfumature da adattare al tuo marchio.
Bordi arrotondati per un aspetto più amichevole (esempio: stile "pillola").
Ombre e transizioni delicate che invogliano a cliccare.
👉 Una risorsa pratica che consiglio è una libreria di stili CSS riutilizzabili per i pulsanti. Questo aiuta a mantenere la coerenza e a risparmiare tempo.
<!-- Botón básico con <button> -->
<button class="btn">Haz clic aquí</button>
<!-- Enlace con apariencia de botón -->
<a href="/it/contacto" class="btn btn-secundario">Contáctanos</a>
/* Estilos base reutilizables */
.btn {
background: linear-gradient(135deg, #0E6BA8, #0B4F7B); /* degradado corporativo */
color: #fff;
border: none;
padding: 12px 24px;
border-radius: 8px; /* esquinas suaves tipo “pill” */
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 3px 6px rgba(0,0,0,0.15); /* sombra sutil */
}
.btn:hover {
background: linear-gradient(135deg, #0B4F7B, #093856); /* cambio de degradado */
transform: translateY(-2px); /* efecto “levantar” */
}
.btn-secundario {
background: #FF6F61; /* color alternativo */
}
Il design front-end moderno richiede pulsanti che non solo "siano presenti", ma che forniscano anche un feedback . Esempi:
I pulsanti sono disabilitati fino al completamento del modulo.
Pulsanti con un indicatore di caricamento che compare quando si invia un modulo o si esegue un'azione.
Pulsanti con cambio di stato dinamico: “Aggiungi al carrello” → “Prodotto aggiunto ✅”.
Non si tratta di un capriccio estetico: migliora l'usabilità perché l'utente comprende cosa sta succedendo ed evita clic ripetuti o frustrazioni.
<button id="btn-form" class="btn" disabled>Enviar</button>
/* Estado deshabilitado */
.btn:disabled {
background: #ccc;
cursor: not-allowed;
box-shadow: none;
}
// Simulación: activar el botón tras completar un formulario
const btn = document.getElementById('btn-form');
// Simulación de validación
setTimeout(() => {
btn.disabled = false;
btn.textContent = "Enviar ahora";
}, 2000);
// Simulación de loader al hacer clic
btn.addEventListener('click', () => {
btn.disabled = true;
btn.textContent = "Enviando...";
setTimeout(() => {
btn.textContent = "¡Enviado ✅!";
}, 2000);
});
Molti sviluppatori commettono l'errore di utilizzare un <div> o un <span> con onclick per simulare i pulsanti. Questo compromette l'accessibilità e fa sì che gli screen reader non li vedano.
Per farlo bene:
Stati Uniti d'America <button> o <a> quando possibile.
Se hai bisogno di personalizzare molto, aggiungi attributi come role="button" y tabindex="0".
Completare con le etichette aria-label quando il testo del pulsante non è sufficientemente descrittivo (ad esempio: icona della lente di ingrandimento che in realtà è "Cerca").
Non si tratta solo di inclusione: migliora indirettamente anche la SEO , perché Google considera l'accessibilità parte integrante dell'esperienza utente.
<!-- Botón con texto accesible -->
<button>Buscar productos</button>
<!-- Botón solo con icono (accesible con aria-label) -->
<button aria-label="Buscar">
<svg width="16" height="16" fill="currentColor">
<path d="M11 6a5 5 0 1 0-1.293 3.293l4 4 1.414-1.414-4-4A5 5 0 0 0 11 6z"/>
</svg>
</button>
<!-- Div convertido en botón (última opción, si no puedes usar <button>) -->
<div role="button" tabindex="0" aria-label="Descargar archivo">⬇️</div>
Quando si lavora a un progetto di grandi dimensioni, non si vogliono avere 50 stili di pulsanti diversi . Idealmente, si dovrebbe definire:
Variabili CSS (proprietà personalizzate): per colori, dimensioni, tipografia.
Token di design: che consentono di scalare il design su team numerosi e di mantenere la coerenza del marchio.
Classi utilitaristiche: stile Tailwind, dove è possibile applicare stili coerenti senza dover reinventare la ruota ogni volta.
/* Variables CSS globales */
:root {
--color-primary: #0E6BA8;
--color-primary-dark: #093856;
--color-secondary: #FF6F61;
--border-radius: 8px;
--spacing-y: 12px;
--spacing-x: 24px;
}
/* Estilo base de botones usando variables */
.btn {
background: var(--color-primary);
color: #fff;
padding: var(--spacing-y) var(--spacing-x);
border-radius: var(--border-radius);
border: none;
cursor: pointer;
transition: background 0.3s ease;
}
.btn:hover {
background: var(--color-primary-dark);
}
.btn-secondary {
background: var(--color-secondary);
}
Abbiamo ottenuto tutto quanto sopra in Elementor, Divi y GutenbergL'idea: creare stili globali riutilizzabili, Stai attento accessibilità (messa a fuoco visibile, contrasto, aria-*) e aggiungere microinterazioni (hover, loader) senza sacrificare le prestazioni.
Obiettivo: uno stile di pulsante "Principale" globale che si possa applicare in 2 clic, con opzioni accessibili al passaggio del mouse/focus e di caricamento.
Percorso rapido (UI):
Impostazioni del sito → Stile del tema → Pulsanti (o Colori/Caratteri globali ).
Crea un token globale (ad esempio, pulsante principale ).
Su ogni widget Button , imposta Stile → Tipografia/Colori con Globale.
En Avanzate → Classi CSS, aggiunto: z-btn z-btn--primary.
CSS (aggiungilo in Impostazioni sito → CSS personalizzato o nel tema figlio):
/* Base accesible y reutilizable */
.z-btn {
--btn-bg: #0E6BA8;
--btn-bg-hover: #09486B;
--btn-color: #fff;
--btn-radius: 10px;
--btn-pad-y: 12px; --btn-pad-x: 22px;
background: var(--btn-bg);
color: var(--btn-color);
border: none;
border-radius: var(--btn-radius);
padding: var(--btn-pad-y) var(--btn-pad-x);
font-weight: 600;
line-height: 1;
transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
/* Hover / Active */
.z-btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.z-btn:active { transform: translateY(0); }
/* Focus visible para accesibilidad teclado */
.z-btn:focus-visible {
outline: 3px solid #FFD166; /* alto contraste */
outline-offset: 2px;
}
/* Estado disabled */
.z-btn:disabled,
.z-btn[aria-disabled="true"] {
background: #c9c9c9; color: #6a6a6a; box-shadow: none; cursor: not-allowed;
}
/* Variante secundaria */
.z-btn--secondary { --btn-bg: #FF6F61; --btn-bg-hover:#e95b4e; }
Caricatore opzionale (nessun plugin):
Aggiungi la classe js-loading-btn al pulsante.
Inserisci un widget HTML alla fine della pagina con questo codice JavaScript (oppure in Theme Builder per l'inserimento globale):
<script>
document.addEventListener('click', function(e){
const btn = e.target.closest('.js-loading-btn');
if(!btn || btn.disabled) return;
const original = btn.innerHTML;
btn.disabled = true;
btn.setAttribute('aria-busy','true');
btn.innerHTML = '<span class="z-spinner" aria-hidden="true"></span> Procesando…';
setTimeout(()=>{ btn.innerHTML = '¡Listo!'; btn.removeAttribute('aria-busy'); }, 1200);
setTimeout(()=>{ btn.innerHTML = original; btn.disabled = false; }, 2200);
});
</script>
<style>
.z-spinner{
display:inline-block; width:1em; height:1em; margin-right:.5em;
border:.18em solid rgba(255,255,255,.5); border-top-color:#fff;
border-radius:50%; animation: zspin .8s linear infinite; vertical-align:-2px;
}
@keyframes zspin{to{transform:rotate(360deg)}}
</style>
Le migliori pratiche di Elementor
Definisci colori/caratteri globali e non personalizzare ogni singolo pulsante.
Verifica la reattività → Mobile : spaziatura ampia e larghezza minima su dispositivi mobili.
Stati Uniti d'America aria-label se il pulsante è solo un'icona.
Obiettivo: creare un preset di pulsanti riutilizzabile in tutto il sito, con focus e varianti accessibili.
Percorso rapido (UI):
Inserisci modulo pulsante → Progettazione.
Regola Tipografia/Colore/Bordo/Ombra.
Salva come predefinito (icona a forma di ingranaggio del modulo → Crea un nuovo predefinito dagli stili correnti ).
Inserisci Classe CSS: z-btn z-btn--primary.
CSS globale (Divi → Opzioni tema → CSS personalizzato):
/* Preserva estilos de Divi, solo añadimos accesibilidad y variantes */
.et_pb_button.z-btn {
--btn-bg:#0E6BA8; --btn-bg-hover:#09486B; --btn-color:#fff; --radius: 10px;
background: var(--btn-bg) !important; color: var(--btn-color) !important;
border-radius: var(--radius); border: none !important;
box-shadow: 0 6px 14px rgba(0,0,0,.12);
transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.et_pb_button.z-btn:hover { background: var(--btn-bg-hover) !important; transform: translateY(-1px); }
.et_pb_button.z-btn:focus-visible {
outline: 3px solid #FFD166; outline-offset: 2px;
}
.et_pb_button.z-btn:disabled { background:#c9c9c9 !important; color:#6a6a6a !important; box-shadow:none; cursor:not-allowed; }
/* Variante secundaria */
.et_pb_button.z-btn--secondary { --btn-bg:#FF6F61; --btn-bg-hover:#e95b4e; }
Caricatore leggero in Divi (Integrazione → Aggiungi codice al ):
<script>
document.addEventListener('click',function(e){
const btn = e.target.closest('.et_pb_button.z-btn.js-loading-btn');
if(!btn || btn.disabled) return;
const label = btn.textContent.trim();
btn.disabled = true; btn.setAttribute('aria-busy','true');
btn.innerHTML = '<span class="z-spinner" aria-hidden="true"></span> '+(btn.dataset.loading || 'Enviando…');
setTimeout(()=>{ btn.innerHTML = '¡Listo!'; btn.removeAttribute('aria-busy'); }, 1200);
setTimeout(()=>{ btn.textContent = label; btn.disabled=false; }, 2200);
});
</script>
<style>
.z-spinner{ display:inline-block;width:1em;height:1em;margin-right:.5em;border:.18em solid rgba(255,255,255,.5);
border-top-color:#fff;border-radius:50%;animation:zspin .8s linear infinite;vertical-align:-2px;}
@keyframes zspin{to{transform:rotate(360deg)}}
</style>
Suggerimento utile su Divi
Utilizza i preset e le impostazioni predefinite globali . Modifica una volta e la modifica si applicherà a tutto il sito.
Attiva l'icona sul pulsante solo se fornisce contesto; aggiungi aria-label se il testo non è sufficiente.
Obiettivo: Utilizzare il blocco Button con classi personalizzate e CSS globale per un sistema coerente. Creare un modello di sezione con una call to action (CTA).
Percorso rapido (UI):
Inserisci blocchi → Pulsanti → Pulsante.
Nella barra laterale, aggiungi Classe CSS aggiuntiva: z-btn z-btn--primary.
Crea un modello (raggruppa la sezione con titolo + testo + pulsante e salvalo come modello riutilizzabile).
CSS (Aspetto → Personalizza → CSS aggiuntivo) o nel tuo tema figlio:
/* Base para Bloque Botón (Gutenberg genera <a class="wp-element-button">) */
.wp-element-button.z-btn {
--btn-bg:#0E6BA8; --btn-bg-hover:#09486B; --btn-color:#fff; --radius:10px;
background: var(--btn-bg); color: var(--btn-color);
border-radius: var(--radius); border: none; padding: 12px 22px; font-weight: 600;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.wp-element-button.z-btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.wp-element-button.z-btn:focus-visible { outline:3px solid #FFD166; outline-offset:2px; }
.wp-element-button.z-btn[aria-disabled="true"] { background:#c9c9c9; color:#6a6a6a; box-shadow:none; cursor:not-allowed; }
/* Variantes */
.wp-element-button.z-btn--secondary { --btn-bg:#FF6F61; --btn-bg-hover:#e95b4e; }
Caricatore (inserisci JS con frammenti di codice o nel tuo tema figlio):
<script>
document.addEventListener('click', function(e){
const btn = e.target.closest('.wp-element-button.z-btn.js-loading-btn');
if(!btn || btn.getAttribute('aria-busy')==='true') return;
const original = btn.innerHTML;
btn.setAttribute('aria-busy','true'); btn.classList.add('is-busy');
btn.innerHTML = '<span class="z-spinner" aria-hidden="true"></span> '+(btn.dataset.loading || 'Procesando…');
setTimeout(()=>{ btn.innerHTML = 'Hecho ✅'; btn.classList.remove('is-busy'); btn.removeAttribute('aria-busy'); }, 1200);
setTimeout(()=>{ btn.innerHTML = original; }, 2200);
});
</script>
<style>
.wp-element-button.z-btn.is-busy { pointer-events:none; opacity:.9; }
.z-spinner{ display:inline-block;width:1em;height:1em;margin-right:.5em;border:.18em solid rgba(255,255,255,.5);
border-top-color:#fff;border-radius:50%;animation:zspin .8s linear infinite;vertical-align:-2px;}
@keyframes zspin{to{transform:rotate(360deg)}}
</style>
Modello consigliato (struttura, nessun plugin necessario):
Gruppo → (Titolo H2 + P + Pulsante di classe) z-btn z-btn--primary js-loading-btn).
Salva come modello "Eroe con CTA".
Le migliori pratiche di Gutenberg
Evitare di iniettare <span onclick>: usa il blocco botón (semantica corretta).
Nel file Theme Styles (theme.json) definisci le variabili di colore/tipo per mantenere la coerenza.
Sfruttiamo Bootstrap e Tailwind per garantire velocità senza compromettere accessibilità e coerenza. Integriamo gli SVG per icone pulite e micro-interazioni che non influiscono sulle prestazioni.
Obiettivo: utilizzare la semantica e le funzionalità di Bootstrap, ma senza attenersi all'aspetto predefinito . Creiamo varianti e valutiamo attentamente il contrasto e l'enfasi.
<!-- Botón primario Bootstrap + icono SVG -->
<button class="btn btn-primary d-inline-flex align-items-center gap-2" type="button">
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 12h18M12 3v18"/>
</svg>
Empezar ahora
</button>
<!-- Botón secundario con aria-label (solo icono) -->
<button class="btn btn-outline-secondary" type="button" aria-label="Abrir búsqueda">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M21 21l-4.35-4.35M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"/>
</svg>
</button>
CSS: stili del marchio + focus visibile + motion-safe
/* Personaliza variables de Bootstrap (ideal en SCSS) o override directo */
.btn-primary{
background:#0E6BA8; border-color:#0E6BA8;
}
.btn-primary:hover{ background:#09486B; border-color:#09486B; }
/* Focus visible consistente y accesible (para todos los botones) */
.btn:focus-visible{
outline:3px solid #FFD166; outline-offset:2px;
}
/* Microanimación segura */
@media (prefers-reduced-motion: no-preference){
.btn{ transition: transform .15s ease, box-shadow .2s ease; }
.btn:hover{ transform: translateY(-1px); }
}
Fast Loader con Bootstrap (non è richiesto Bootstrap JS):
<button class="btn btn-primary js-loading" type="button">Enviar</button>
<script>
document.addEventListener('click', (e)=>{
const b = e.target.closest('.js-loading'); if(!b || b.dataset.busy) return;
const original = b.innerHTML;
b.dataset.busy = "1"; b.disabled = true; b.setAttribute('aria-busy','true');
b.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Procesando…`;
setTimeout(()=>{ b.innerHTML = '¡Listo!'; b.removeAttribute('aria-busy'); }, 1200);
setTimeout(()=>{ b.innerHTML = original; b.disabled = false; delete b.dataset.busy; }, 2200);
});
</script>
Obiettivo: Mantenere la coerenza definendo colori/raggi in tailwind.config.js e componendo pulsanti con classi di utilità. Aggiungiamo componenti con @apply.
tailwind.config.js (estratto)
module.exports = {
theme: {
extend: {
colors: {
brand: {
DEFAULT: '#0E6BA8',
dark: '#09486B',
secondary: '#FF6F61'
}
},
borderRadius: { 'brand': '10px' }
}
}
}
CSS (file components.css)
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
@apply inline-flex items-center justify-center font-semibold text-white
px-5 py-3 rounded-brand shadow transition;
}
.btn-primary { @apply bg-brand hover:bg-brand-dark; }
.btn-secondary { @apply bg-brand-secondary hover:brightness-95; }
.btn:focus-visible{
outline: 3px solid #FFD166; outline-offset: 2px;
}
}
HTML (Tailwind)
<!-- Botón primario con icono -->
<button class="btn btn-primary gap-2" type="button">
<svg class="w-4 h-4" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 12h18M12 3v18"/></svg>
Empezar ahora
</button>
<!-- Solo icono (accesible) -->
<button class="btn btn-secondary p-3" aria-label="Abrir búsqueda" type="button">
<svg class="w-4 h-4" viewBox="0 0 24 24"><path d="M21 21l-4.35-4.35M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"/></svg>
</button>
Loader con Tailwind (leggero, senza dipendenze)
<button class="btn btn-primary js-tw-loading" type="button">Enviar</button>
<script>
document.addEventListener('click', (e)=>{
const b = e.target.closest('.js-tw-loading'); if(!b || b.dataset.busy) return;
const original = b.innerHTML;
b.dataset.busy="1"; b.disabled=true; b.setAttribute('aria-busy','true');
b.innerHTML = `<svg class="w-4 h-4 mr-2 animate-spin inline" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" stroke="white" stroke-width="4" fill="none" opacity=".35"/>
<path d="M22 12a10 10 0 0 1-10 10" stroke="white" stroke-width="4" fill="none"/>
</svg>Procesando…`;
setTimeout(()=>{ b.innerHTML='¡Listo!'; b.removeAttribute('aria-busy'); },1200);
setTimeout(()=>{ b.innerHTML=original; b.disabled=false; delete b.dataset.busy; },2200);
});
</script>
Buone abitudini:
SVG in linea (come negli esempi): consente l'ereditarietà currentColor, animare con CSS ed evitare ulteriori richieste.
Inserisci aria-hidden="true" Se l'icona è decorativa; utilizzare aria-label/testo visibile se comunica un'azione.
Microinterazioni morbide: rotazione, leggero ridimensionamento, modifiche di opacità. Rispettare prefers-reduced-motion.
<button class="btn btn-primary gap-2" type="button">
<svg class="w-4 h-4 icon-rotate" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
</svg>
Continuar
</button>
<style>
.icon-rotate{ transition: transform .2s ease; }
.btn:hover .icon-rotate{ transform: rotate(15deg) scale(1.05); }
@media (prefers-reduced-motion: reduce){
.icon-rotate, .btn{ transition: none; }
}
</style>
Creare pulsanti per i siti web significa anche creare esperienze inclusive. Un pulsante accessibile riduce gli ostacoli, migliora i tassi di conversione ed evita problemi legali. Entriamo nel vivo della questione.
Contrasto minimo : 4.5:1 tra il testo del pulsante e il suo sfondo (WCAG AA).
Punto focale visibile : se navigo con la tastiera (Tab/Maiusc+Tab), devo poter vedere chiaramente quale pulsante è attivo.
Ordine logico della tabulazione : l'attenzione deve seguire il flusso visivo.
/* Foco visible consistente en todos los botones */
button:focus-visible,
a.wp-element-button:focus-visible,
.et_pb_button:focus-visible {
outline: 3px solid #FFD166; /* color alto contraste */
outline-offset: 2px;
}
Se il pulsante ha solo l'icona, Aggiungere aria-label con l'azione (ad esempio "Apri ricerca").
Se il testo è ambiguo ("Invia"), considera di aggiungere contesto chiudere o aria-describedby.
Evita di ripetere pulsanti con la stessa etichetta per azioni diverse nella stessa schermata.
<!-- Solo icono, accesible -->
<button aria-label="Abrir búsqueda">
<svg aria-hidden="true" focusable="false" ...>...</svg>
</button>
<!-- Botón con icono + texto: aria-hidden en el icono -->
<button>
<svg aria-hidden="true" ...>...</svg>
Descargar informe
</button>
Stati Uniti d'America <button> per azioni; <a href> per la navigazione.
Solo come ultima risorsa, trasforma un contenitore in un pulsante con role="button" + tabindex="0" + gestione della tastiera.
<!-- NO recomendado -->
<span onclick="comprar()">Comprar</span>
<!-- Último recurso accesible -->
<span role="button" tabindex="0" aria-label="Comprar ahora"
onclick="comprar()"
onkeydown="if(event.key==='Enter' || event.key===' '){comprar()}">
Comprar
</span>
Un consiglio rapido: prova la pagina con la tastiera. Se non riesci a completare l'azione senza il mouse, significa che non è accessibile.
Se non misuri, dai per scontato. Etichetta le tue CTA, osserva il comportamento e migliora con i dati.
Opzione leggera senza GTM (vanilla JS + GA4):
<button class="btn" data-cta="plan_pro" id="cta-plan-pro">Empezar Plan Pro</button>
<script>
window.dataLayer = window.dataLayer || [];
document.addEventListener('click', (e)=>{
const cta = e.target.closest('[data-cta]');
if(!cta) return;
dataLayer.push({
event: 'cta_click',
cta_id: cta.id || null,
cta_name: cta.dataset.cta,
cta_text: cta.textContent.trim(),
cta_location: 'pricing_table'
});
});
</script>
Poi in GA4 Si crea l'evento consigliato (o personalizzato) da event=cta_click e si mappano i parametri.
Inizia con ciò che di solito ha l'impatto maggiore:
Testo del pulsante (beneficio diretto vs. azione generica).
Posizione (sopra la piega, fisso su dispositivi mobili, fine delle sezioni).
Colore/contrasto (nel rispetto delle linee guida del tuo marchio).
Mini snippet di test molto semplice (copia 50/50):
<button class="btn js-ab-cta" data-variant-a="Probar gratis"
data-variant-b="Empieza sin pagar">Probar gratis</button>
<script>
document.querySelectorAll('.js-ab-cta').forEach(btn=>{
const variant = Math.random() < 0.5 ? 'a' : 'b';
btn.textContent = btn.dataset['variant'+variant.toUpperCase()];
btn.dataset.variant = variant;
btn.addEventListener('click', ()=>{
dataLayer.push({event:'cta_test_click', variant});
});
});
</script>
In questo modo, ora puoi vedere in GA4 quale variante riceve più clic.
Stati Uniti d'America <a href> quando l'azione porta a un altro URL (navigazione o download). Utilizzare <button> per azioni (inviare moduli, aprire finestre modali, eseguire JS). Questo mantiene semantica corretta, migliora l'accessibilità e rende il codice HTML più chiaro per i motori di ricerca e gli screen reader.
A titolo di riferimento, un'area minima di tocco di 44×44 px (Apple/WCAG). Utilizzare un'ampia spaziatura verticale (12–16 px) e una dimensione del carattere leggibile (≥16 px). Lasciare spazio tra i pulsanti per evitare tocchi accidentali.
Il colore da solo non "vende", ma il contrasto e la coerenza sì. Assicurati che il pulsante principale non entri in competizione con altri elementi visivi. Dai priorità al testo (beneficio) e al posizionamento (punto nel funnel) rispetto al semplice cambio di colore da verde a rosso.
Tre passaggi:
Utilizzare tag semantici (<button>, <a href>).
Garantire contrasto e messa a fuoco visibile (regole CSS precedenti).
Inserisci aria-label alloggi quando il testo visibile non descrive bene l'azione (solo icone).
Su dispositivi mobili non è presente l'effetto hover , ma l' indicatore di caricamento e il feedback al clic sono di grande aiuto. Riducono l'ansia dell'utente e prevengono clic ripetuti (errori e frustrazione). Sono piccoli miglioramenti, ma ottimizzano l'esperienza utente e, di conseguenza, le metriche.
Sì. Definisci classi e variabili CSS globali (.z-btn, --btn-bg, --btn-radius) e applicarli in ogni layout. In questo modo si ottiene coherencia senza dover rifare gli stili in ogni builder.
Creare pulsanti per siti web non significa semplicemente "aggiungere una casella colorata". Si tratta di progettare punti decisionali che colleghino l'intenzione all'azione. Se si presta attenzione ai principi fondamentali dell'UX (affordance, gerarchia, testo e contrasto), si rispetta l'accessibilità , si implementano stati e micro-interazioni che forniscono feedback e si misurano le prestazioni con i dati , i pulsanti smetteranno di essere semplici elementi decorativi e diventeranno potenti strumenti di business.
Che lavoriate con HTML/CSS/JS , Elementor, Divi o Gutenberg , o che vi affidiate a Bootstrap/Tailwind , l'obiettivo è lo stesso: pulsanti immediatamente riconoscibili , facili da capire e che trasmettano fiducia . In questo modo, il clic diventa naturale.
Voci correlate
