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.
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:
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:
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
Using jQueryIn 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").
Each method provides an effective way to change the button color on click, but they differ in terms of implementation and ease of use:
- CSS
:active is the simplest and is useful for creating a brief visual effect while the button is being pressed. - JavaScript gives you more control and flexibility for handling more complex scenarios.
- jQuery simplifies DOM manipulation and is particularly useful when working with a larger codebase or integrating other jQuery plugins.
Similar Reads
How to Change the Button Color in HTML ?
Styling of elements enhances the visual appearance and improves the overall user interface. We can change the button color in HTML using different approaches as listed below. Table of Content Using Inline StylingUsing Internal StylingChange the Button Color Using Inline StylingIn this approach, we a
3 min read
How to change the button color after clicking it using AngularJS ?
Created an HTML button and the task is to change the background color of the button when pressing it with the help of AngularJS. This task can be accomplished using the ng-click directive that helps to toggle the display of the content when the button or any specific HTML element is clicked. Here, t
2 min read
How to Change Close Button Color in Bootstrap 5?
Changing the color of the close button in Bootstrap 5 involves customizing the styles using CSS. The close button in Bootstrap 5 has a specific class .btn-close, and you can override its styles to achieve the desired color. In this article, we will see how we can do it.Preview PrerequisitesHTMLCSS B
2 min read
How to Change Button Color in Bootstrap 5 ?
Bootstrap 5 provides developers with a lot of capabilities that enable them to create responsive and aesthetically pleasing online apps. Developers frequently require customizations, such as altering button colors to better reflect their branding or design philosophies. This post will walk you throu
2 min read
How to Change SVG Icon Color on Click in JavaScript ?
SVG stands for Scalable Vector Graphics and is a vector image format for two-dimensional images that may be used to generate animations. The XML format defines the SVG document. You can change the color of an SVG using the below methods: Table of Content Using the setAttribute()Using style.fill prop
2 min read
How to Change Button Size in HTML?
To change the size of a button in HTML, there are several methods such as using the style attribute, external CSS, or adjusting the padding and font size. Modifying the button’s size enhances both the visual design and the user experience of a website.Here are three approaches to changing the size o
2 min read
How to change the Background Color after Clicking the Button in JavaScript?
Changing the background color after clicking a button in JavaScript involves attaching a click event listener to the button. When the button is clicked, it triggers a function that changes the background color of a specific element (like the page or a section of it).This creates a simple and interac
3 min read
How to change the color of an icon using jQuery ?
In this article, we will see how to change the color of the icon using jQuery. To change the color of the icon, we will use a jquery method. jQuery css() method this method is used to change the styling of a particular selector. This method is also can be used for changing the color of the icon. Fir
2 min read
Change the Color of Action Button in Shiny using R
Shiny is an R package that enables users to create web applications directly from R which resembles a framework for developing web apps also known as apps In Shiny apps, one general thing to do is to change the properties of widgets to enhance the usability of the Shiny app. In this article, you are
5 min read
How to change background color of paragraph on double click using jQuery ?
In this article, we will see how to change the background color of a paragraph using jQuery. To change the background color, we use on() method. The on() method is used to listen the event on an element. Here we are going to use dblclick event. For changing the background color we are going to use c
2 min read