CSS active Pseudo-Class

The CSS active pseudo-class can be implemented with any HTML element, the element appears active when the user clicks on it. It is typically used on <a> and <button> elements.

Syntax:
selector:active {
/* declarations */
}

Here is an example of how an HTML element changes its background color when you click on it.

Example:
<!DOCTYPE html>
<html>

<body>
    <style type="text/css">
        .box {
            background-color: lemonchiffon;
            width: 400px;
            height: 120px;
            margin: auto;
            font-size: 30px;
            padding: 5px;
            border: 1px solid #edaf85;
            border-radius: 14px;
            text-align: center;
        }
        
        .box:active {
            background-color: honeydew;
            border-color: #c8c8ff;
        }
    </style>

    <div class="box">
        Click me to make me active.
    </div>

</body>

</html>

Scroll Back to Top