CSS-Button-Generator
Gestalte Buttons und kopiere sauberes CSS.
Lege Beschriftung, Farben, Eckenradius, Padding und Schriftgröße eines Buttons fest, betrachte ihn live und kopiere einsatzbereites CSS inklusive Hover-Zustand.
Hintergrund
Textfarbe
Hover-Farbe
12px
24px
12px
16px
.my-button {
background: #7c3aed;
color: #ffffff;
border: none;
border-radius: 12px;
padding: 12px 24px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease;
}
.my-button:hover {
background: #6d28d9;
}So generierst du Button-CSS
- Gib den gewünschten Buttontext ein.
- Wähle Hintergrund-, Text- und Hover-Farbe.
- Passe Radius, Padding und Schriftgröße mit den Schiebereglern an.
- Kopiere das CSS und füge die Hover-Regel zum Stylesheet hinzu.
Häufig gestellte Fragen
Enthält das CSS einen Hover-Effekt?
Ja. Eine :hover-Regel mit deiner Hover-Farbe wird zusammen mit dem Basisstil erzeugt.
Kann ich Schriftart oder -stärke ändern?
Die Ausgabe setzt font-weight 700. Passe font-family und andere Eigenschaften nach dem Einfügen frei an.
Wird etwas hochgeladen?
Nein. Der Generator läuft vollständig auf Client-Seite und speichert nichts.