CSS düğme oluşturucu
Düğme tasarlayın, temiz CSS kopyalayın.
Bir düğmenin metnini, renklerini, köşe yarıçapını, dolgusunu ve yazı boyutunu belirleyin, canlı önizleyin ve hover durumlu kullanıma hazır CSS kopyalayın.
Arka plan
Metin rengi
Hover rengi
12px
24px
12px
16px
.my-button {
background: #7c3aed;
color: #ffffff;
border: none;
border-radius: 12px;
padding: 12px 24px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease;
}
.my-button:hover {
background: #6d28d9;
}Düğme CSS'i nasıl üretilir
- İstediğiniz düğme metnini yazın.
- Arka plan, metin ve hover renklerini seçin.
- Yarıçap, dolgu ve yazı boyutunu kaydırıcılarla ayarlayın.
- CSS'i kopyalayın ve hover kuralını stil dosyanıza ekleyin.
Sıkça sorulan sorular
CSS hover efekti içeriyor mu?
Evet. Seçtiğiniz hover rengiyle temel stilin yanında :hover kuralı da üretilir.
Yazı tipini veya kalınlığını değiştirebilir miyim?
Çıktı font-weight 700 olarak ayarlar. Yapıştırdıktan sonra font-family ve diğer özellikleri serbestçe düzenleyin.
Herhangi bir şey yükleniyor mu?
Hayır. Oluşturucu tamamen istemci tarafında çalışır ve hiçbir şey saklamaz.