Knap-generator

Dette værktøj skaber en CSS-knapp fra tekst, farver, størrelse, ramme, hover-effekt og valgfrit box-shadow, med en live interaktiv forhåndsvisning, du kan hover over. Det genererer en `.button { ... }`-klasse med en `transition: all 0.2s ease` og en separat `.button:hover`-regel baseret på den valgte hover-effekt (mørkere, ljusere, lyft eller ingen).

1. Indtast knapstexten (standardværdien er Click Me). 2. Vælg bakgrunds- og tekstfarver via farvevalgere eller hex-indstillinger. 3. Juster skriftstørrelsen (10–32 px), padding X (8–48 px), padding Y (4–24 px) og borderradiusen (0–50 px) med sliderer. 4. Stil farven på rammen og rammens bredde (0–5 px). 5. Vælg en effekt ved overførsel: mørkere, heller, lyft eller ingen. 6. Aktiver boxshadow til valg og juster blurring, offset X og offset Y. 7. Flyt over forvisningen for at se effekten; klik på Copy på CSS Output-kortet.

Førtyg/lyft tilpas baggrundsfarven med +/-30 RGB-enheder via `adjustBrightness`. Lift anvender `transform: translateY(-2px)` plus en `box-shadow: 0 4px 8px rgba(0,0,0,0.2)` ved overflyd. None ekskluderer reglen for overflyd fuldstændigt. Outputten er en enkelt `.button`-regel, der indeholder background-color, color, font-size, padding, border-radius, border, cursor, transition og valgfrit box-shadow, efterfulgt af `.button:hover`-blokken, når det er relevant. Ingen HTML genereres.