Una voce di menu a pulsante è un elemento della navigazione che mantiene la struttura di una normale voce di menu, ma viene stilizzato e percepito come un vero pulsante. Serve a dare maggiore evidenza ad un’azione importante migliorando la gerarchia visiva e guidando l’utente verso la conversione. Alcuni temi sviluppati per WordPress prevedono questa opzione; se non è presente questo articolo mostra la procedura per ottenere tale effetto mediante l’integrazione di codice CSS.
Caratteristiche principali
- Aspetto da pulsante: padding maggiore, sfondo colorato, bordi arrotondati, contrasto elevato.
- Comportamento coerente: rimane parte del menu, ma si distingue visivamente come CTA.
- Accessibilità migliorata: area click più ampia e riconoscibile.
- Per evidenziare una singola azione strategica nel menu.
- Per aumentare il tasso di click su pagine chiave.
- Per creare un contrasto visivo che orienta l’utente senza appesantire il design.
Iniziamo la procedura inserendo nella voce di menu che desideriamo evidenziare la classe menu-evidenziato, successivamnte inseriremo nella sezione del tema dedicata all’integrazione di codice CSS, una tra le configurazioni proposte negli esempi seguenti con lo scopo di ottenere effetti differenti.
Evidenziazione di base
/* Evidenziazione di base */
.menu-evidenziato > a {
background: #ffcc00;
color: #000;
padding: 10px 18px;
border-radius: 6px;
font-weight: 600;
transition: 0.25s ease;
}
.menu-evidenziato > a:hover {
background: #e6b800;
color: #000;
}
Bordo elegante
.menu-evidenziato > a {
border: 2px solid #0073e6;
padding: 8px 14px;
border-radius: 4px;
}
Effetto “pill button”
.menu-evidenziato > a {
background: #6a00ff;
color: #fff;
padding: 10px 22px;
border-radius: 30px;
}
Gradiente
.menu-evidenziato > a {
background: linear-gradient(135deg, #00c6ff, #0072ff);
color: #fff;
padding: 10px 20px;
border-radius: 8px;
}
