Özet - Düğme varyasyonları

Gradyanlarla düğme varyasyonları kurarsın.

Üç gradyan, tek yer

Bu grupta üç gradyan işlevi öğrendin: linear-gradient(), radial-gradient() ve conic-gradient(). Her biri farklı bir geçiş biçimi çizer: doğru, merkezden dışa, merkez çevresinde açı.

Renk duraklarına yüzde konum verebilir, iki durak arasına gradyan ipucu sıkıştırabilir ve iki gradyanı virgülle katmanlayabilirsin. Şimdi tüm bunları düğme varyasyonlarında birleştireceksin.

Uygulama Birinci düğme: lineer gradyan

.btn-primary seçicisi için bir arka plan tanımla. Değer linear-gradient(to bottom, teal, navy) olsun. Aynı blokta color: white ve padding: 0.75rem 1.5rem da tanımlansın. Yalnızca bu üç bildirimi içersin.

Örnek çözümü göster

/* birinci düğme: lineer gradyan */
.btn-primary {
  background: linear-gradient(to bottom, teal, navy);
  color: white;
  padding: 0.75rem 1.5rem;
}

Uygulama İkinci düğme: katmanlı gradyan

.btn-glow seçicisi için iki katmanlı bir arka plan tanımla. Birinci katman radial-gradient(circle at top, rgba(255,255,255,0.5), transparent 60%), ikinci katman linear-gradient(to bottom, teal, navy) olsun. Aynı blokta color: white da tanımlansın. Virgülle ayrılmış tek bir background bildirimi yaz.

Örnek çözümü göster

/* ikinci düğme: katmanlı gradyan */
.btn-glow {
  background: radial-gradient(circle at top, rgba(255,255,255,0.5), transparent 60%), linear-gradient(to bottom, teal, navy);
  color: white;
}

Kendini test et

Bir düğmeye yukarıdan aşağı renk geçişi için hangisi uygundur?
- conic-gradient(from 0deg, navy, teal)
- radial-gradient(circle, navy, teal)
- linear-gradient(to bottom, navy, teal)
- linear-gradient(to right, navy, teal)
Cevabı göster

linear-gradient(to bottom, navy, teal) — Doğru. to bottom dikey, yani yukarıdan aşağı bir geçiş verir.

Lineer gradyanı tamamla

background: linear-gradient(to right, ____);

Cevabı göster

background: linear-gradient(to right, navy, teal);

Sıradaki ders: Filter özelliği

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler