Button-Generator

Dieses Tool erstellt einen CSS-Button aus Text, Farben, Größen, Rahmen, Hover-Effekt und optionalem box-shadow mit einer Live-Vorschau, über die Sie fahren können. Es gibt eine `.button { ... }`-Klasse mit einem `transition: all 0.2s ease` und einer separaten `.button:hover`-Regel basierend auf dem gewählten Hover-Effekt (abdunkeln, aufhellen, anheben oder keine) aus.

1. Button-Text eingeben (Standard ist Click Me). 2. Hintergrund- und Textfarben über die Farbwähler oder Hex-Eingaben wählen. 3. Schriftgröße (10-32px), Padding X (8-48px), Padding Y (4-24px) und Rahmenradius (0-50px) mit den Schiebereglern anpassen. 4. Rahmenfarbe und Rahmenbreite (0-5px) festlegen. 5. Hover-Effekt wählen: abdunkeln, aufhellen, anheben oder keine. 6. Optional Schatten aktivieren und Unschärfe, Versatz X und Versatz Y anpassen. 7. Über die Vorschau fahren, um den Effekt zu sehen; auf der CSS-Ausgabe-Karte auf Kopieren klicken.

Abdunkeln/Aufhellen passen die Hintergrundfarbe um +/-30 RGB-Einheiten über `adjustBrightness` an. Anheben wendet beim Hover `transform: translateY(-2px)` sowie einen `box-shadow: 0 4px 8px rgba(0,0,0,0.2)` an. Keine lässt die Hover-Regel vollständig weg. Die Ausgabe ist eine einzelne `.button`-Regel mit background-color, color, font-size, padding, border-radius, border, cursor, transition und optionalem box-shadow, gefolgt vom `.button:hover`-Block, sofern zutreffend. Es wird kein HTML erzeugt.