Hover efekti
Coddy'nin CSS Projesi - Şık Buton kursunda ders 7 / 8.
Düğmenin üzerine gelindiğinde bazı efektler yapalım!
Üzerine gelindiğinde düğmeyi değiştirmek için :hover sözde sınıfını kullanırız,
.fancyButton:hover {
background-color: red;
}Yukarıdaki örnekte düğmemiz üzerine gelindiğinde kırmızı olacaktır!
Geçişi pürüzsüz hale getirmek için şunu kullanın,
.fancyButton {
...
transition: all 0.2s;
}Geçiş süresiyle (0.2s) oynayabilirsiniz.
Görev
KolayButonunuza hover (üzerine gelme) efekti ekleyin, güzel görünmesini sağlayın!
Gerekli görevler:
- Butonunuza bir transition özelliği ekleyin; süre seçimi size ait, ancak 1 saniye veya daha kısa olmalı.
- Butonunuzun hover efektine
opacity: 0.8;ekleyin.
Hover durumunda değiştirilmesi önerilen isteğe bağlı özellikler:
- gölgeler (
box-shadow) - arka plan rengi
Kendin dene
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
</body>
</html>