Knappgenerator

Dette verktøyet bygger en CSS-knapp fra tekst, farger, størrelse, kant, sveveeffekt og valgfri skygge, med en direkte interaktiv forhåndsvisning du kan sveve over. Det sender ut en `.button { ... }`-klasse med en `transition: all 0.2s ease` og en separat `.button:hover`-regel basert på den valgte sveveeffekten (mørkne, lysne, løft eller ingen).

1. Skriv inn Knapp-tekst (standard er Click Me). 2. Velg Bakgrunnsfarge og Tekstfarge via fargevelgerne eller hex-inndataene. 3. Juster Skriftstørrelse (10-32px), Polstring X (8-48px), Polstring Y (4-24px) og Kantradius (0-50px) med glidebryterne. 4. Angi Kantfarge og Kantbredde (0-5px). 5. Velg en Sveveeffekt: mørkne, lysne, løft eller ingen. 6. Valgfritt aktiver Boksskygge og justere Sløringsgrad, Forskyvning X og Forskyvning Y. 7. Svev over forhåndsvisningen for å se effekten; klikk Kopier på CSS-utdata-kortet.

Mørkne/lysne justerer bakgrunnsfargen med +/-30 RGB-enheter via `adjustBrightness`. Løft bruker `transform: translateY(-2px)` pluss en `box-shadow: 0 4px 8px rgba(0,0,0,0.2)` ved sveving. Ingen utelater sveve-regelen fullstendig. Utdata er en enkelt `.button`-regel som inneholder background-color, color, font-size, padding, border-radius, border, cursor, transition og valgfri box-shadow, etterfulgt av `.button:hover`-blokken når aktuelt. Ingen HTML genereres.