CSS-Button-Generator Anleitung
Buttons sind das meistgeklickte Element jeder Seite — sie tragen jede Anmeldung, jeden Kauf und Download. Der Generator bietet 6 Stile (Verlauf, Umriss, 3D, Pille, Glühen, Glanz), jeweils mit echtem Hover-Zustand, plus eigene Farbe, Radius und Abstände.
Stil wählen, Farbe und Regler einstellen, CSS kopieren. In einen <style>-Block einfügen, class="btn" zum Button hinzufügen — der Hover-Effekt kommt automatisch mit.
Pro Tips
- Stimmen Sie die Button-Farbe auf Ihre CTA-Akzentfarbe ab und halten Sie den Textkontrast bei mindestens 4.5:1 (WCAG AA).
- Fügen Sie immer einen sichtbaren Hover-Zustand hinzu — leichtes Anheben oder Schatten bestätigt die Klickbarkeit und steigert die Conversion.
Frequently Asked Questions
Q: Wie füge ich den Button meiner Website hinzu?
Wie füge ich den Button meiner Website hinzu? Kopieren Sie das generierte CSS in einen <style>-Block und nutzen Sie <button class="btn">Label</button> im HTML.
Q: Warum zeigt mein Verlaufs-Button eine Vollfarbe?
Warum zeigt mein Verlaufs-Button eine Vollfarbe? Verläufe brauchen Start- und Endfarbe — prüfen Sie, ob beide Farbwähler gesetzt sind und background nicht von einer anderen Regel überschrieben wird.
Q: Kann ich den Hover-Effekt ändern?
Kann ich den Hover-Effekt ändern? Ja — der .btn:hover-Block ist separat. Bearbeiten oder löschen Sie seine transform-, Schatten- oder Hintergrundzeilen frei.
Q: Sind diese Buttons barrierefrei?
Sind diese Buttons barrierefrei? Ja. Verwenden Sie lesbaren Kontrast und ergänzen Sie :focus-visible { outline: 2px solid; outline-offset: 2px; } für Tastaturnutzer.
Q: Darf ich sie in kommerziellen Projekten nutzen?
Darf ich sie in kommerziellen Projekten nutzen? Absolut — das generierte CSS ist original und kostenlos für private und Kundenprojekte.
Bauhaus-Farben
Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.
Bauhaus Rot #BE1E2DDas ikonische Rot der Bauhaus-Plakate und Drucksachen
Bauhaus Gelb #FFDE17Das leuchtende Gelb der Bauhaus-Ästhetik
Bauhaus Blau #00509EDas tiefe Blau des Bauhaus-Farbkreises
Ultramarin #120A8FHistorisches Pigment aus Lapislazuli, von Goethe beschrieben
Ocker #C78B2CErdpigment der deutschen Renaissance-Malerei
Petrol #006D7CDas Blaugrün der Nachkriegszeit und des Mid-Century-Designs
Lindgrün #7CBA3DDas frische Grün der Frühlingslinden
Ziegelrot #B22222Die roten Ziegeldächer der Altstädte
Graphit #38383ADer dunkle Grauton der Zeichenkunst und des Industriedesigns
Weiß #F4F4F4Das Weiß der Bauhaus-Wände — Raum und Licht
Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.