Ö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);