Knapp-generator

Det här verktyget bygger en CSS-knapp från text, färger, storlek, kant, hovringseffekt och valfri box-shadow, med en live interaktiv förhandsgranskning som du kan hovra över. Det matar ut en `.button { ... }`-klass med en `transition: all 0.2s ease` och en separat `.button:hover`-regel baserad på den valda hovringseffekten (mörkare, ljusare, lyft eller ingen).

1. Ange knapptext (standard är Klicka på mig). 2. Välj bakgrunds- och textfärger via färgväljarna eller hex-inmatningarna. 3. Justera teckenstorlek (10-32px), utfyllnad X (8-48px), utfyllnad Y (4-24px) och kantradie (0-50px) med reglage. 4. Ställ in kantfärg och kantbredd (0-5px). 5. Välj en hovringseffekt: mörkare, ljusare, lyft eller ingen. 6. Aktiva valfri box-shadow och justera oskärpa, förskjutning X och förskjutning Y. 7. Hovra över förhandsgranskningen för att se effekten; klicka på Kopiera på CSS-utmatningkortet.

Mörkare/ljusare justerar bakgrundsfärgen med +/-30 RGB-enheter via `adjustBrightness`. Lyft tillämpar `transform: translateY(-2px)` plus en `box-shadow: 0 4px 8px rgba(0,0,0,0.2)` vid hovring. Ingen utelämnar hovringsregeln helt. Utmatningen är en enda `.button`-regel som innehåller background-color, color, font-size, padding, border-radius, border, cursor, transition och valfri box-shadow, följt av `.button:hover`-blocket när det är tillämpligt. Inget HTML genereras.