Button stilleri
button etiketini biçimlendirmeyi öğrenirsin.
button etiketini biçimle
<button> etiketi formun gönderme düğmesidir. Tarayıcı onu soluk gri bir kutu olarak çizer; bu pek çok tasarımda yetersizdir.
Biçimlendirmek için padding, background, color, border ve border-radius ayarlanır. Örnek: .submit { background: #2563eb; color: white; padding: 10px 20px; border: none; border-radius: 6px; }. Düğme artık hem okunur hem de davetkâr.
:hover ve :active
Bir düğmenin üzerini fareyle gezdiğinde veya tıkladığında durum değişir. CSS'te iki sözde sınıf bunu yakalar: :hover fare üstündeyken, :active tıklanınca.
Yaygın bir kalıp: hover'da arka planı bir ton koyulaştır, active'de bir ton daha koyu yap. Böylece düğme canlıymış gibi tepki verir. Geçişle birlikte akıcı görünür: transition: background 0.2s;.
cursor ve geçiş
İki küçük detay düğmeyi önemli ölçüde iyileştirir. Birincisi cursor: pointer;: fare düğmenin üstüne gelince el imlecine döner; tıklanabilir olduğu anlaşılır.
İkincisi transition: hover ve active durumları arasında yumuşak bir geçiş sağlar. Ani renk değişimi yerine 0.2 saniyelik bir kayma daha doğal hissettirir. İkisi birlikte, düğmeyi gerçekten bir düğme gibi davranır.
Uygulama Bir gönderme düğmesi kur
.submit seçicisi içine şunları yaz: background: #2563eb;, color: white;, padding: 10px 20px;, border: none;, cursor: pointer;. Ayrıca .submit:hover için background: #1d4ed8; yaz.
Örnek çözümü göster
.submit seçicisini aç, beş bildirimi yaz; sonra .submit:hover için koyu mavi ekle.
Örnek çözüm:
.submit {
background: #2563eb;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.submit:hover {
background: #1d4ed8;
}Kendini test et
-
Hangisi fareyle üzerine gelince devreye girer?
- button.hover { ... }
- button::hover { ... }
- button:hovers { ... }
- button:hover { ... }
Cevabı göster
button:hover { ... } — Doğru! :hover sözde sınıfı, fareyle üzerine gelindiğinde devreye girer.
-
button:hover için koyu renk
button:hover { background: ____; }Cevabı göster
button:hover { background: #1d4ed8; } -
Düğme durumlarını eşleştir
- button
- etiket
- button:hover
- fareyle üzerinedir
- button:active
- tıklanmış
- cursor: pointer
- el imleci