a11y.skipToMainContent
1

CSS Button Generator

Gestalten Sie gut aussehende CSS-Tasten visuell - Füllen, Rahmen, Radius, Schatten und Schwebe - und kopieren Sie dann das CSS.

px
px
px
Fill
Color
Border
px
px
Box shadow

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Button Generator

  1. Stellen Sie die Schaltfläche Text, Padding, Schriftgröße und Gewicht und Textfarbe ein.
  2. Wählen Sie eine feste oder Zwei-Stopp-Gradientenfüllung und schalten Sie den Rahmen und den Schatten nach Bedarf um.
  3. Wählen Sie einen Border-Radius und einen Hover-Effekt (Lift, Darken oder Glow) und sehen Sie sich die Live-Vorschau an.
  4. Klicken Sie auf CSS kopieren, um sowohl die .btn- als auch die .btn:hover-Regeln in Ihr Stylesheet zu kopieren.

Was ist CSS-Button-Generator?

Dieser Generator erstellt eine vollständige CSS-Regel für eine Schaltfläche aus visuellen Steuerelementen. Passen Sie den Text, das Padding, die Schriftgröße und das Gewicht, die Textfarbe, einen festen oder zweistufigen Gradientenfüller, einen optionalen Rahmen, den border-radius, einen optionalen Drop-Shadow und einen Hover-Effekt und die Live-Vorschau-Updates bei jeder Änderung an - einschließlich eines Arbeits-Hover-Status, der auf die Vorschau-Taste angewendet wird.

Die Ausgabe ist ein bereit zum Einfügen .btn { ... } Block zusammen mit einem passenden .btn:hover { ... } Block, so dass Sie beide in Ihr Stylesheet fallen lassen und die Klasse btn auf jedes Element anwenden können. Alles wird in Ihrem Browser berechnet; nichts wird hochgeladen.

Advertisement

FAQ

Zeigt die Vorschau den echten Hover-Effekt?
Ja. Die generierte Hover-Regel wird als ein Scope-Style eingespeist, der nur auf die Vorschau-Taste abzielt, so dass das Überfahren genau zeigt, was der kopierte .btn: Hover-Block tun wird.
Kann ich einen Gradienten-Button machen?
Klicken Sie auf den Gradienten, um die Füllung von einer einzigen Farbe auf einen linearen Gradienten mit zwei Stopps umzuschalten. Sie können beide Farben auswählen und den Steigungswinkel einstellen, und die Hover-Effekte funktionieren auch mit Steigungen.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Button Generator on Wikipedia·Developer Tools on Wikipedia·CSS Button Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement