Knopgenerator

Deze tool bouwt een CSS-knop op basis van tekst, kleuren, afmetingen, rand, hover-effect en optionele box-shadow, met een live interactieve voorvertoning waarop je kunt hoveren. Hij levert een `.button { ... }`-klasse met een `transition: all 0.2s ease` en een aparte `.button:hover`-regel op basis van het gekozen hover-effect (donkerder, lichter, omhoog of geen).

1. Voer de knoptekst in (standaard Click Me). 2. Kies achtergrond- en tekstkleuren via de kleurkiezers of hex-invoer. 3. Pas Lettergrootte (10-32px), Padding X (8-48px), Padding Y (4-24px) en Randradius (0-50px) aan met de schuifregelaars. 4. Stel Randkleur en Randbreedte (0-5px) in. 5. Kies een Hover-effect: donkerder, lichter, omhoog of geen. 6. Schakel optioneel Schaduw in en stel Vervaging, Verschuiving X en Verschuiving Y bij. 7. Hover over de voorvertoning om het effect te zien; klik op Kopiëren op de CSS-uitvoerkaart.

Donkerder/lichter passen de achtergrondkleur aan met +/-30 RGB-eenheden via `adjustBrightness`. Omhoog past bij hover `transform: translateY(-2px)` plus een `box-shadow: 0 4px 8px rgba(0,0,0,0.2)` toe. Geen laat de hover-regel helemaal weg. De uitvoer is één enkele `.button`-regel met background-color, color, font-size, padding, border-radius, border, cursor, transition en optionele box-shadow, gevolgd door het `.button:hover`-blok indien van toepassing. Er wordt geen HTML gegenereerd.