CSS Button Generator
Generieren Sie sofort gestylte CSS-Schaltflächen. Wählen Sie aus Flat, Outlined, Gradient, Shadow und Ghost — CSS und HTML mit einem Klick kopieren.
① Button-Text eingeben ② Stil und Form wählen ③ CSS und HTML kopieren
Stil
Form
Hauptfarbe
#C9B89A
So funktioniert es
Jeder Stil verwendet reines CSS ohne JavaScript. Flat und Gradient verwenden gefüllte Hintergründe; Outlined und Ghost verwenden transparente Hintergründe mit Rahmen; Shadow fügt einen farbigen Box-Shadow hinzu.
Formoptionen
Quadrat verwendet 4px border-radius für scharfe Ecken. Abgerundet verwendet 8px für ein modernes Erscheinungsbild. Pill verwendet 9999px für eine vollständig abgerundete Kapselform.
Hover-Zustände
Das generierte CSS enthält Hover-Stile mit opacity: 0.85 oder filter: brightness(), sodass Sie nur eine Farbvariable für Standard- und Hover-Zustände benötigen.
.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;
}
HTML-Ausgabe<button class="btn">Click me</button>
Was ist ein CSS-Button-Generator?
Ein CSS-Button-Generator ist ein Tool, das eine einsatzbereite .btn-CSS-Klasse und passendes HTML-Markup für gestylte Button-Komponenten erstellt. Modernes Button-Design umfasst sorgfältige Entscheidungen über background, border-radius, font-size und interaktive Hover-Zustände. Gängige Muster: Flat (solide Füllung), Outlined (transparent mit Rahmen), Gradient (Multi-Stop-Hintergrund), Shadow (farbiges Box-Shadow-Glühen) und Ghost (semi-transparente Füllung).
Häufig gestellte Fragen
Ein Flat-Button verwendet eine einzige solide Hintergrundfarbe ohne Verläufe oder Schatten. Ein Gradient-Button verwendet einen linear-gradient von der Hauptfarbe zu einer dunkleren Schattierung derselben Farbe.
Der Outlined-Stil verwendet einen transparenten Hintergrund mit einem farbigen Rahmen (2px solid) und farbigem Text. Beim Hover erhält der Button typischerweise einen subtilen Hintergrund.
Ein Ghost-Button verwendet einen sehr leicht getönten Hintergrund (Farbe mit 13% Alpha) und einen semi-transparenten Rahmen (44% Alpha). Er eignet sich für tertiäre Aktionen.
Die dunklere Schattierung wird berechnet, indem die Hex-Farbe in HSL umgewandelt und die Helligkeit um 20% reduziert wird.
Die generierten Buttons haben ausreichend Farbkontrast. Für vollständige Barrierefreiheit fügen Sie aria-label-Attribute hinzu und stellen Sie sicher, dass Focus-Stile sichtbar sind.
Das generierte CSS enthält Hover-Zustände. Für Focus und Active fügen Sie :focus { outline: 2px solid {color}; outline-offset: 2px; } und :active { transform: scale(0.97); } zum .btn-Ruleset hinzu.
Ja. Verwenden Sie verschiedene Klassennamen (z.B. .btn-primary, .btn-outlined) und generieren Sie für jeden separates CSS.