Hover Effects

Part of the CSS Mastery section of Coddy's HTML journey — lesson 8 of 43.

The :hover pseudo-class lets you change the style of an element when the user hovers their mouse over it.

Here's a simple example that changes the text color when you hover over a button:

button {
  color: black;
}

button:hover {
  color: red;
}

In this example, the button text is black by default, but when you hover over it, the text turns red.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

You have a button that needs to change style when hovered. Your task is to:

Use the :hover pseudo-class to change the background color of the button to green when the user hovers over it.
Apply a box shadow to the button during the hover effect to make it look like it's lifted. Use box-shadow like this:

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

It adds a shadow with an offset, blur, and color.

Cheat sheet

The :hover pseudo-class changes the style of an element when the user hovers their mouse over it:

button {
  color: black;
}

button:hover {
  color: red;
}

In this example, the button text is black by default, but when you hover over it, the text turns red.

Try it yourself

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

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.