Efekty najechania kursorem

Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 8 z 43.

Pseudoklasa :hover pozwala zmienić styl elementu, gdy użytkownik najedzie na niego myszą.

Oto prosty przykład, który zmienia kolor tekstu po najechaniu kursorem na przycisk:

button {
  color: black;
}

button:hover {
  color: red;
}

W tym przykładzie tekst przycisku jest domyślnie czarny, ale po najechaniu na niego kursorem zmienia kolor na czerwony.

Wyzwanie

Łatwy

Masz przycisk, którego styl ma się zmieniać po najechaniu na niego kursorem. Twoje zadanie:

Użyj pseudoklasy :hover, aby zmienić kolor tła przycisku na zielony, gdy użytkownik najedzie na niego kursorem.
Zastosuj cień do przycisku podczas efektu najechania kursorem, aby wyglądał, jakby był uniesiony. Użyj box-shadow w ten sposób:

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

Dodaje cień z przesunięciem, rozmyciem i kolorem.

Spróbuj swoich sił

<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>