Pulsante moderno con hover e focus
Pulsante chiaro, riconoscibile e accessibile.
Quando si usa
Per collegamenti importanti, inviti all'azione, invio di moduli e comandi che devono distinguersi dal testo normale.
Perché si usa
Gli stati hover e focus aiutano l'utente a capire che l'elemento è interattivo e rendono più agevole la navigazione da tastiera.
Vantaggi principali
- Aspetto coerente
- Focus ben visibile
- Transizione leggera senza spostamenti
Anteprima del risultato
Il pulsante cambia leggermente aspetto al passaggio del mouse e rimane riconoscibile anche quando riceve il focus da tastiera.
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<a class="pulsante-moderno" href="#">Vai alla pagina</a>
<style>
.pulsante-moderno{display:inline-block;padding:11px 18px;background:#2463a9;color:#fff;text-decoration:none;border-radius:8px;font-weight:700;transition:background-color .2s}
.pulsante-moderno:hover{background:#173b6d}
.pulsante-moderno:focus-visible{outline:3px solid #f3b61f;outline-offset:3px}
</style>Da personalizzare: Modifica colore, testo, raggio degli angoli e dimensione. Usa button per le azioni e a per i collegamenti.
Errore da evitare: Non usare colori con contrasto insufficiente e non rimuovere il focus senza una sostituzione visibile.