How to Change the Color of Button on Click ? - Coding

Sometimes, on a web page, when a user clicks a button it gets difficult to understand whether the button is clicked or not. In such cases, you can change the background color of the button to indicate that the button is clicked.

The below methods can be used to change background color of a button on click.

Table of Content

Using :active pseudo selector
Using JavaScript

Using :active pseudo selector

We can change the color of a button when we click on it using the :active pseudo property of CSS. This property changes the color of the button when we click on the button.

Syntax:

selectedHTMLElement:active{
    // CSS to change color
}

Example: The below code will explain the use of the :active pseudo property to change the color of a button on click.

HTML

<!DOCTYPE html>
<html lang="en">

<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

Using JavaScript

You can also use the addEventListener() method of JavaScript to add click event and change the color of the button to a particular button permanently.

Syntax:

 selectedHTMLElement.addEventListener('click', callbackFn);

Example: The below code will explain the use of JavaScript to change the color of a button on click.

HTML

<!DOCTYPE html>
<html lang="en">

<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

Reffered: https://www.geeksforgeeks.org

HTML

Related
How is HTTP used in API Development ?
Difference between no follow and no referrer in SEO
Why HTML is called Markup Language ?
How to Set Table Cell Width & Height in HTML ?
How to make HTML5 Video Poster be same Size as Video Itself ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	16