Generatore di pulsanti CSS
Parti da uno stile pronto e regola colore, dimensione, angoli e ombra. Passa il mouse e clicca sull’anteprima per vedere gli effetti, poi copia il codice.
Come si usaBei pulsanti in CSS
Disponibile in: 
Generatore di pulsanti CSS: a cosa serve
Scegli uno stile pronto (pieno, pillola, contorno, sfumato o quadrato) e regola testo, colori, dimensione del carattere, spaziatura, angoli, ombra, peso del carattere e l’effetto al passaggio del mouse (sale, scurisce o ingrandisce). L’anteprima funziona davvero: passa il mouse e clicca.
Il CSS include il focus visibile per la tastiera, l’effetto hover solo sui dispositivi con mouse e una leggera riduzione al clic. Lo strumento mostra il contrasto tra testo e sfondo e avvisa quando scende sotto 4,5:1.
Come si usa
- Scegli uno stile pronto.
- Regola colori, dimensione, angoli, ombra ed effetto.
- Controlla il contrasto e copia il CSS e l’HTML.
Quando usarlo
- Pulsanti di invito all’azione nelle landing page.
- Uniformare i pulsanti di un sito.
- Imparare il CSS vedendo il risultato.
Domande frequenti
Il pulsante è accessibile?
Il codice usa il tag button (o a), mantiene visibile il contorno del focus con :focus-visible e lo strumento avvisa quando il contrasto tra testo e sfondo scende sotto 4,5:1, il minimo WCAG per il testo normale.
Perché l’effetto hover compare solo sul computer?
L’hover sta dentro @media (hover: hover), perché sul cellulare il tocco attiva un falso hover che resta bloccato sul pulsante. L’effetto del clic (:active) funziona su tutti i dispositivi.
Posso usare il codice su un link?
Sì. Sostituisci <button> con <a href="..."> e mantieni la classe; il CSS include già display:inline-flex e text-decoration:none per entrambi i casi.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.