CSS Düğme Oluşturucu Renkler, iç boşluklar, sınırlar, gölgeler ve hover efektleri ile özel CSS düğmeleri tasarlayın.
CSS Düğme Oluşturucu
Renkler, iç boşluklar, sınırlar, gölgeler ve hover efektleri ile özel CSS düğmeleri tasarlayın.
Düğme stilini özelleştir
Görsel kontrolleri kullanarak renkleri, iç boşluğu, yazı tipi boyutunu, kenarlığı ve gölgeleri ayarlayın.
Üstüne gelince efektini yapılandır
Etkileşimli geri bildirim için üstüne gelince arka plan rengini seçin.
CSS'yi kopyalayın
Düğmeyi önizleyin ve hem temel hem de üstüne gelince CSS stillerini kopyalayın.
What Is CSS Düğme Oluşturucu?
CSS Düğme Oluşturucu, özel düğme stillerini görsel olarak tasarlamak için kapsamlı bir araçtır. Düğmenler temel UI öğeleri olup, stilinin doğru olması kullanıcı deneyimi için çok önemlidir. Bu araç, düğme tasarımının her yönünü tam kontrol sağlar: arka plan ve metin renkleri, iç boşluk, yazı tipi boyutu ve ağırlığı, kenarlık genişliği ve rengi, kenar yarıçapı, kutu gölgeliği ve geçiş efektleri. Canlı ön izleme, düğmenizi bir web sayfasında görüneceği gibi gösterir, ayrıca üzerine gelindiğinde geçiş durumunu da gösterir. Oluşturulan CSS, hem temel düğme stillerini hem de geçiş pseudo-sınıfını içerir ve üretim için hazır kod sağlar.
Why Use CSS Düğme Oluşturucu?
-
Tüm düğme özelliklerine, včetně üstüne gelince durumlarına tam kontrol
-
Gerçek üstüne gelince efekti gösterimi ile canlı etkileşimli önizleme
-
Üretim kullanımı için hem temel hem de üstüne gelince CSS üretir
-
Marka tasarımını kolayca eşleştirmek için renk seçicileri
Common Use Cases
Çağrıya Cevap Düğmeleri
Landing sayfaları ve pazarlama siteleri için görsel olarak çekici Çağrıya Cevap düğmeleri tasarlayın.
Form Gönderme Düğmeleri
Web formları için tutarlı ve erişilebilir gönderme düğmeleri oluşturun.
Navigasyon Bağlantıları
Kullanıcı etkileşim kalıplarını netleştirmek için navigasyon bağlantılarını düğme olarak stilleyin.
Bileşen Kütüphaneleri
Tasarım sistemleri ve bileşen kütüphaneleri için temel düğme stilleri oluşturun.
Technical Guide
CSS düğmeneleri, birlikte çalışan birkaç özelliğe dayanır: arka plan rengi dolduruyu ayarlar, renk metin görünümünü kontrol eder, kenarlık dış hatları tanımlar, kenar yarıçapı yuvarlak köşeler oluşturur ve iç boşluk iç mesafeyi kontrol eder. Geçiş özelliği, geçiş durumlarında pürüzsüz değişiklikler sağlar. Yazı tipi özellikleri (yazı boyutu, yazı ağırlığı) tipografiyi kontrol eder. Kutu gölgeliği derinlik ekler. Erişilebilirlik için düğmenelerin en az 44x44 piksel dokunmatik hedefe ve yeterli renk kontrastına sahip olması gerekir (WCAG AA normal metin için 4,5:1 gerektirir). İmlenin nokta işareti özelliği, öğenin tıklanabilir olduğunu görsel olarak bildirir. Geçiş durumları net bir görsel değişim sağlamalıdır ancak çok dramatik olmamalıdır. Klavye gezintisi için odaklanılabilir stilleri eklemeyi düşünün. Eylemler için düğme öğesini ve gezinme için bağlantı etiketlerini kullanın. Geçiş özelliği, daha iyi performans için tüm yerine belirli özellikleri hedeflemelidir.
Tips & Best Practices
-
1Mobil erişilebilirlik için en az 44px dokunma hedefi sağlayın
-
2Az bir renk değişimi ve translateY(-1px) ile ince üstüne gelince efektleri kullanın
-
3Düğme renklerini marka paletinizle eşleştirin untuk tutarlılık
-
4Klavye erişilebilirliği için ayrıca odaklanılabilir stiller ekleyin
Related Tools
CSS Gradyan Jeneratörü
Birden çok renk durakları ve açı kontrolü ile güzel lineer, radyal ve konik CSS gradyanlar oluşturun.
🎨 CSS & Design
CSS Kutu Gölgesi Oluşturucu
Birden çok katman, iç gömme seçenekleri ve gerçek zamanlı ön izleme ile CSS kutu gölgeleri oluşturun.
🎨 CSS & Design
CSS Kenar Yuvarlaklık Oluşturucu
Her köşe için ayrı kontrol ve görsel önizleme ile CSS kenar yuvarlaklık değerleri oluşturun.
🎨 CSS & Design
CSS Geçiş Jeneratörü
Özellik, süre, yumuşatma ve hover efektleri ile özelleştirilebilir CSS geçişleri oluşturun.
🎨 CSS & DesignFrequently Asked Questions
Q Üstüne gelince efektinin mobilde çalışıyor mu?
Q Düğmeyi erişilebilir nasıl yaparım?
Q Devre dışı bırakma durumunu ekleyebilir miyim?
Q Hangi iç boşluk değerlerini kullanmalıyım?
Q Yazı tipi boyutu için px mi yoksa rem mi kullanmalıyım?
About This Tool
CSS Düğme Oluşturucu is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.