CSS Düğme Jeneratör
CSS kodu ile Genrate Styled düğmeleri
tools.buttonGenerator.title
tools.buttonGenerator.description
.click-me {
padding: 12px 18px;
font-size: 16px;
font-weight: 600;
border-radius: 4px;
border: none;
background-color: #3B82F6;
color: #FFFFFF;
cursor: pointer;
}
.click-me:hover {
background-color: #2563EB;
}Düğme Oluşturucumuzu kullanarak CSS stiline sahip özel düğmeler tasarlayın. Web projeleriniz için renkler, boyutlar, kenarlıklar ve fareyle üzerine gelme efektleri içeren stilize düğmeler oluşturun.
Key Features
Özelleştirilebilir düğme metni ve stili
Arka plan ve metin renkleri için renk seçici
Ayarlanabilir dolgu, yazı tipi boyutu ve kenarlık yarıçapı
Yazı tipi ağırlığı ve stil seçenekleri
Kenarlık stili (yok, düz, kesikli, noktalı)
Vurgulu efektli renk seçimi
Düğme Oluşturucu
Düğme Metnini Girin
Düğmenizde görünmesini istediğiniz etiket metnini yazın
Renkleri Özelleştir
Arka plan, metin ve fareyle üzerine gelme renklerini ayarlamak için renk seçicileri kullanın
Boyutları Ayarla
Boyutlandırma için dolguyu, yazı tipi boyutunu ve kenarlık yarıçapını ayarlayın
Stil Ekle
İsterseniz yazı tipi ağırlığını ve kenarlık stilini seçin
CSS'yi kopyala
Stilize edilmiş düğmenizin CSS kodunu almak için Kopyala'yı tıklayın
Use Cases
Açılış sayfaları için harekete geçirici mesaj düğmeleri oluşturma
Web uygulamaları için tutarlı düğme stilleri tasarlama
Etkileşimli geri bildirim için düğme üzerine gelme durumları oluşturma
Tasarım sistemleri için kullanıcı arayüzü bileşenlerinin prototiplenmesi
Frequently Asked Questions
Farklı düğme durumları oluşturabilir miyim?
Evet, oluşturucu hem normal hem de fareyle üzerine gelme durumu CSS'sini otomatik olarak oluşturur
Hangi CSS sınıfları oluşturulur?
Araç, düğme metninize dayalı olarak anlamsal sınıf adları oluşturur
Kenarlık stillerini özelleştirebilir miyim?
Evet, özel genişlikte hiçbiri, düz, kesikli, noktalı veya çift kenarlıklar arasından seçim yapın
Kod üretime hazır mı?
Evet, oluşturulan tüm CSS'ler optimize edilmiştir ve üretimde kullanıma hazırdır
Tool Information
Related Tools You Might Like
Imagen Color Agent from Image
Bir görüntüden baskın renkler
RGB/HEX Converter
RGB ve HEX renk biçimleri arasında dönüştürücü
CSS Gradient Jeneratör
Özel CSS lisanslamaları ile oluşturun
WCAG Contrast Checker
WCAG standartlarına göre renk kontrastı kontrol edin
Digital Signature Jeneratör
Farklı fontlarla dijital imzalar oluşturun
Box Shadow Jeneratör
Genrate CSS kutusu gölgeleri
Surfboard Volume Hesap
Kilonuz, deneyim seviyeniz ve dalga koşullarınıza dayanan mükemmel sörf hacmini hesaplayın.
Wave Height Converter
Farklı dalga yükseklik ölçümleri (yüz yükseklik, Hawaii ölçeği, okyanus swell).
Scuba Dive Planlayıcı
Scuba dalışını derinlik sınırları, alt zaman ve güvenlik depresyon gereksinimleri ile planlayın.