Özet - Hover efektleri

CSS kursu · Orta seviye · Ders 63/98

Transition özellikleriyle hover efektli düğmeler kurarsın.

Özet: Hover efektleri

Bu özette dört transition bildirimini bir araya getiriyoruz: transition-property (hangi özellik), transition-duration (süre), transition-timing-function (eğri) ve transition-delay (gecikme). Dördü birlikte hover efektli bir düğme kurar.

Hepsini tek tek ya da transition kısa yazımıyla verebilirsin. Bu derste her iki yolu da deneyeceksin; hem uzun hem kısa yazımı denemek, akılda kalmasını kolaylaştırır.

Dört bildirim bir arada

Hover efektli bir düğme, dört bildirimi bir arada kullanır. transition-property: background-color ile rengi seçeriz; transition-duration: 0.25s ile süreyi; transition-timing-function: ease-in-out ile eğriyi; transition-delay: 0.1s ile hafif bir gecikme veririz.

Aynı etkiyi transition: background-color 0.25s ease-in-out 0.1s tek satırıyla da yazabilirsin. Hangisi daha okunabilir gelirse onu seç.

Uygulama Düğmeyi dört bildirimle kur

.btn öğesine dört transition bildirimi ekle: transition-property: background-color, transition-duration: 0.25s, transition-timing-function: ease-in-out ve transition-delay: 0.1s. .btn:hover durumu için background-color: #1d4ed8 tanımla.

Örnek çözümü göster

.btn {
  background-color: #2563eb;
  color: #ffffff;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 0.5rem;
  transition-property: background-color;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.1s;
}

.btn:hover {
  background-color: #1d4ed8;
}

Uygulama Kart geçişini kısa yazımla kur

.card öğesine transition: background-color 0.3s ease 0.1s kısa yazımını ekle. .card:hover durumu için background-color: #f3f4f6 tanımla. Böylece dört bildirimi tek satırda vermiş olursun.

Örnek çözümü göster

.card {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 0.75rem;
  transition: background-color 0.3s ease 0.1s;
}

.card:hover {
  background-color: #f3f4f6;
}

Kendini test et

Hover'da düğme rengi yumuşakça değişsin. Hangi bildirim işe yarar?
```
/* ? */
.btn:hover { background-color: navy; }
```
- animation: background-color 0.3s
- transform: background-color
- transition: background-color 0.3s
- background-color: transition 0.3s
Cevabı göster

transition: background-color 0.3s — Doğru. transition bildirimi, hover'da renk değerinin yumuşakça değişmesini sağlar.

Hangi özellik geçiş yapacak?

.btn {
  transition-property: ____;
  transition-duration: 0.25s;
}

Cevabı göster

.btn {
  transition-property: background-color;
  transition-duration: 0.25s;
}

Kendin dene

index.html

Orta seviye bölümündeki tüm dersler

Özet - Hover efektleri