Active Styles

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

The :active pseudo-class applies styles to an element when it is being activated by the user, typically when a user clicks on an element and holds the mouse button down.

For example:

<button class="action-button">Click Me!</button>

Add CSS to style the button when it's active:

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

When you click and hold down on the button, it will change color from blue to darkblue. This gives users visual feedback that their action is being registered.

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

Write CSS for the .special-link class that adds the following styles when the link is active:

Changes the text color to #e74c3c
Adds a text shadow of 1px 1px 2px rgba(0,0,0,0.3)

Cheat sheet

The :active pseudo-class applies styles to an element when it is being activated by the user, typically when clicking and holding the mouse button down.

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

This provides visual feedback that the user's action is being registered.

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <title>Active Pseudo-class</title>
    <style>
        /* Write your CSS here */
        
    </style>
</head>
<body>
    <a href="#" class="special-link">Interactive Link</a>
</body>
</html>

Test yourself

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