How to Change the Color of Button on Click ?

Last Updated : 26 Apr, 2025

Sometimes, on a web page, when a user clicks a button, it gets difficult to understand whether the button was clicked or not. In such cases, you can change the background color of the button to indicate that the button is clicked. Changing the color of a button when it's clicked can make your website more interactive and user-friendly. This effect provides immediate feedback to users, enhancing their experience.

Methods to Change Button Color on Click

Below are the methods that can be used to change the button color on click:

1. Using :active pseudo selector

The :active pseudo-class in CSS allows you to style an element during the time it is being activated by the user. This typically refers to the period when a user clicks on an element, such as a button or a link.

Syntax

selectedHTMLElement:active{
    // CSS to change color
}

Now let's understand this with the help of an example:

HTML

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            background-color: darkblue;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
        }
        button:active {
            background-color: rgb(36, 174, 96);
            transform: translateY(4px);
        }
    </style>
</head>
<body style="text-align: center;">
    <h1>
        Click the below button to change
        <br/>the backgroud color.
    </h1>
    <button>
        Click here
    </button>
</body>
</html>

Output:

fosiGIF

In this example:

Button Styling: The button has a dark blue background, white text, padding, and rounded corners.
Active State: When the button is clicked (:active), the background turns green, and it moves down by 4px (press effect).
Heading Text: The <h1> text asks users to click the button, and it's centered using inline CSS (text-align: center;).
Button Element: Displays the text "Click here" and applies the styles described above.
Active Effect: The button visually responds when clicked, with color change and movement.

2. Using JavaScript

To make a button change color when clicked, JavaScript can be used to modify the button's style dynamically. Here's how you can do it:

Syntax

 selectedHTMLElement.addEventListener('click', callbackFn);

Now let's understand this with the help of example

HTML

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        button {
            background-color: blue;
            color: white;
            padding: 10px 20px;
        }
    </style>
</head>

<body style="text-align: center;">
    <h1>
        Click the below button to change
        <br /> the color of it.
    </h1>
    <button>
        Click here
    </button>

    <script>
        const button =
            document.querySelector('button');
        button.addEventListener('click',
            () => {
                button.style.backgroundColor = 
                    "green";
            });
    </script>
</body>
</html>

Output:

fosiGIF

In this example:

Button Styling: The button has a blue background, white text, and padding for spacing.
Heading Text: The <h1> tag provides instructions to click the button to change its color, and the text is centered.
Button Element: Displays a button with the text "Click here" styled as described.
JavaScript: When the button is clicked, its background color changes to green using JavaScript and the click event listener.

3. Using jQuery

jQuery provides a simpler way to handle DOM manipulation and events. To change the button color when it's clicked, the click() method in jQuery can be used.

Syntax

$(selector).click(function() {
    // Code to change color
});

Now let's understand this with the help of example

HTML

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Color Change with jQuery</title>

    <style>
        button {
            background-color: blue;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>

<body style="text-align: center;">
    <h1>
        Click the below button to change
        <br /> the color of it.
    </h1>
    <button>
        Click here
    </button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $(this).css("background-color", "green"); 
            });
        });
    </script>
</body>

</html>

Output

In this example:

Button Styling: The button has a blue background, white text, padding, font size, a pointer cursor, no border, and rounded corners (5px).
Heading Text: The <h1> tag provides instructions to the user, and the text is centered on the page.
Button Element: Displays a button with the text "Click here" styled with the given CSS.
jQuery Script: When the button is clicked, jQuery changes its background color to green using $(this).css("background-color", "green").

Choosing the Best Method for Button Color Change

Each method provides an effective way to change the button color on click, but they differ in terms of implementation and ease of use: