Painikegeneraattori

Tämä työkalu rakentaa CSS-painikkeen tekstistä, väreistä, mitoista, reunuksesta, osoitustehosteesta ja valinnaisesta box-shadow-varjosta, ja tarjoaa reaaliaikaisen interaktiivisen esikatselun, jota voit osoittaa. Se tuottaa `.button { ... }` -luokan, jossa on `transition: all 0.2s ease`, sekä erillisen `.button:hover` -säännön valitun osoitustehosteen (darken, lighten, lift tai none) perusteella.

1. Syötä painikkeen teksti (oletus on Click Me). 2. Valitse tausta- ja tekstivärit värivalitsimella tai heksasyötteellä. 3. Säädä Font Size (10-32px), Padding X (8-48px), Padding Y (4-24px) ja Border Radius (0-50px) liukusäätimillä. 4. Aseta Border Color ja Border Width (0-5px). 5. Valitse Hover Effect: darken, lighten, lift tai none. 6. Halutessasi ota Box Shadow käyttöön ja säädä Blur, Offset X ja Offset Y. 7. Osoita esikatselua nähdäksesi tehosteen; napsauta Copy-painiketta CSS Output -kortissa.

Darken/lighten säätävät taustaväriä +/-30 RGB-yksiköllä funktion `adjustBrightness` avulla. Lift lisää osoitettaessa `transform: translateY(-2px)` ja `box-shadow: 0 4px 8px rgba(0,0,0,0.2)`. None jättää osoitussäännön kokonaan pois. Tuloste on yksittäinen `.button`-sääntö, joka sisältää background-color, color, font-size, padding, border-radius, border, cursor, transition ja valinnaisen box-shadow, jota seuraa `.button:hover`-lohko, kun se on voimassa. HTML:ää ei luoda.