Generatore di Bottoni CSS
Genera bottoni CSS stilizzati all'istante. Scegli tra flat, outlined, gradient, shadow e ghost — copia CSS e HTML in un clic.
① Scrivi il testo del bottone ② Scegli stile e forma ③ Copia CSS e HTML
Stile
Forma
Colore principale
#C9B89A
Come funziona
Ogni stile usa CSS puro senza JavaScript. Flat e gradient usano sfondi pieni; outlined e ghost usano sfondi trasparenti con bordi; shadow aggiunge un box-shadow colorato che corrisponde al colore del bottone.
Opzioni di forma
Quadrato usa border-radius 4px per angoli netti. Arrotondato usa 8px per un look moderno. Pill usa 9999px per creare una forma a capsula completamente arrotondata.
Stati hover
Il CSS generato include stili hover usando opacity: 0.85 o filter: brightness() in modo da usare una sola variabile colore per entrambi gli stati predefinito e hover.
.btn {
padding: 0.6em 1.4em;
cursor: pointer;
font-size: 15px;
font-family: inherit;
border-radius: 8px;
transition: all 0.2s;
background: #c9b89a;
color: #fff;
border: none;
}
.btn:hover {
opacity: 0.85;
}
Output HTML<button class="btn">Click me</button>
Cos'è un generatore di bottoni CSS?
Un generatore di bottoni CSS è uno strumento che produce una classe CSS .btn pronta all'uso e il corrispondente markup HTML per componenti button stilizzati. Il design moderno dei bottoni coinvolge scelte accurate di background, border-radius, font-size e stati hover interattivi. Pattern comuni: flat (riempimento solido), outlined (trasparente con bordo), gradient (background multi-stop), shadow (glow box-shadow colorato), ghost (riempimento semi-trasparente). Tutti gli stili usano CSS puro.
Domande frequenti
Un bottone flat usa un singolo colore di sfondo solido senza gradienti o ombre. Un bottone gradient usa un linear-gradient dal colore principale a una tonalità più scura dello stesso colore, creando un look tridimensionale.
Lo stile outlined usa uno sfondo trasparente con un bordo colorato (2px solid) e testo colorato. All'hover, il bottone acquista tipicamente uno sfondo sottile. Funziona bene come bottone di azione secondaria.
Un bottone ghost usa uno sfondo leggermente tintato (colore con 13% alpha) e un bordo semi-trasparente (44% alpha). Crea un aspetto minimalista adatto per azioni terziarie o su sfondi complessi.
La tonalità più scura è calcolata convertendo il colore hex in HSL e riducendo la luminosità del 20%. Questo assicura che il gradiente vada sempre dal colore scelto a una variante naturalmente più scura.
I bottoni generati includono contrasto sufficiente per la leggibilità. Per l'accessibilità completa, aggiungi attributi aria-label e assicurati che gli stili focus siano visibili nel tuo foglio di stile.
Il CSS generato include stati hover. Per aggiungere focus e active, aggiungi :focus { outline: 2px solid {color}; outline-offset: 2px; } e :active { transform: scale(0.97); } al ruleset .btn.
Sì. Usa nomi di classe diversi (es. .btn-primary, .btn-outlined) e genera CSS separato per ognuno. Le forme e le dimensioni font possono essere standardizzate mentre lo stile di riempimento distingue la gerarchia.