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

Sıradaki ders: Checkbox ve radio

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler