Hover Efektleri

Coddy'nin HTML Journey'sinin CSS Hakimiyeti 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 stilini değiştirmesi gereken bir düğmeniz var. Göreviniz:

Kullanıcı üzerine geldiğinde düğmenin arka plan rengini yeşile değiştirmek için :hover sözde sınıfını kullanın.
Kaldırılmış gibi görünmesini sağlamak için üzerine gelme efekti sırasında düğmeye 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, ofseti, bulanıklığı ve rengi olan 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>