Hover Efektleri

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 8 / 43.

:hover sözde sınıfı, kullanıcı faresini bir öğenin üzerine getirdiğinde öğenin stilini değiştirmenize olanak tanır.

Bir düğmenin üzerine geldiğinizde metin rengini değiştiren basit bir örnek:

button {
  color: black;
}

button:hover {
  color: red;
}

Bu örnekte, düğme metni varsayılan olarak siyahtır, ancak üzerine geldiğinizde metin kırmızıya döner.

Görev

Kolay

Üzerine gelindiğinde stili değişmesi gereken bir butonunuz var. Göreviniz şunları yapmaktır:

Kullanıcı butonun üzerine geldiğinde butonun arka plan rengini green olarak değiştirmek için :hover sözde sınıfını kullanın.
Hover efekti sırasında butona, yükseltilmiş gibi görünmesini sağlamak için bir kutu gölgesi uygulayın. box-shadow özelliğini şu şekilde kullanın:

box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);

Bu; ofset, bulanıklık ve renk içeren bir gölge ekler.

Kendin dene

<html>
<head>
    <title>Hover Effects</title>
    <style>
        .hover-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
        }
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <button class="hover-button">Hover over me!</button>
</body>
</html>