Düğme Oluşturucu

Bu araç, metin, renkler, boyutlandırma, kenarlık, hover efekti ve isteğe bağlı kutu-gölge ile bir CSS düğmesi oluşturur, üzerinde hover yapabileceğiniz canlı bir önizleme ile birlikte. Çıktı, `transition: all 0.2s ease` içeren bir `.button { ... }` sınıfı ve seçilen hover efetine (koyulaştırma, aydınlatma, kaldırma veya yok) dayalı ayrı bir `.button:hover` kuralı üretir.

1. Düğme Metni girin (varsayılan olarak Click Me). 2. Renk seçiciler veya hex girişleri aracılığıyla Arka Plan ve Metin renklerini seçin. 3. Kaydırıcılarla Yazı Boyutu (10-32px), Doldurma X (8-48px), Doldurma Y (4-24px) ve Kenarlık Yarıçapı (0-50px) değerlerini ayarlayın. 4. Kenarlık Rengi ve Kenarlık Genişliği (0-5px) değerlerini ayarlayın. 5. Bir Hover Efekti seçin: koyulaştır, aydınlat, kaldır veya yok. 6. İsteğe bağlı olarak Kutu Gölgesini etkinleştirin ve Bulanıklık, Ofset X ve Ofset Y değerlerini ayarlayın. 7. Efekti görmek için önizlemenin üzerine gelin; CSS Çıktı kartında Kopyala'ya tıklayın.

Koyulaştırma/aydınlatma, `adjustBrightness` aracılığıyla arka plan rengini +/-30 RGB birimi ile ayarlar. Kaldırma, hover halinde `transform: translateY(-2px)` ve `box-shadow: 0 4px 8px rgba(0,0,0,0.2)` uygular. Yok, hover kuralını tamamen atlar. Çıktı, background-color, color, font-size, padding, border-radius, border, cursor, transition ve isteğe bağlı box-shadow içeren tek bir `.button` kuralı ve geçerli olduğunda `.button:hover` bloğunu içerir. HTML üretilmez.