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

selector:active {
/* declarations */


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

<!DOCTYPE html>

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

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