---
title: "How to change button color on hover in JavaScript?"
description: "How to change button color on hover in JavaScript?"
author: "Ravi Vishwakarma"
published: 2021-07-19
updated: 2023-06-16
canonical: https://answers.mindstick.com/qa/93771/how-to-change-button-color-on-hover-in-javascript
category: "web application"
tags: ["html5", "css cascading style sheets", "javascript"]
reading_time: 3 minutes
---
# How to change button color on hover in JavaScript?
How to change [button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) [color](https://www.mindstick.com/articles/77/how-to-split-form-background-color-in-c-sharp) on hover in [JavaScript](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript)?
## Answers
### Answer by Ethan Karla
We know that, in CSS psuedo selector is use to decorating the page elements.
```
```
### Answer by Manish Sharma
We know that in **CSS pseudo** selector is used to decorate the page elements.
[https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
```css
Hover Me
```
### Answer by Muskan Digital
To change the button color on hover using JavaScript, you can follow these steps:
1. HTML: Create a button element with an ID or class attribute. For example:
htmlCopy code
```plaintext
```
1. CSS: Define the default button style and the hover style in your CSS. For example:
cssCopy code
```plaintext
#myButton {
background-color: blue;
color: white;
}
#myButton:hover {
background-color: red;
}
```
1. JavaScript (optional): If you want to change the button color dynamically using JavaScript, you can add an event listener to the button and update the CSS properties. For example:
javascriptCopy code
```plaintext
const button = document.getElementById("myButton");
button.addEventListener("mouseover", function() {
button.style.backgroundColor = "red";
});
button.addEventListener("mouseout", function() {
button.style.backgroundColor = "blue";
});
```
In this JavaScript code, we attach event listeners to the button element. When the mouse hovers over the button (**mouseover** event), the background color is changed to red. When the mouse moves out of the button (**mouseout** event), the background color is reverted back to blue.
Note: It's important to have a default button style defined in CSS so that the button reverts to the original color when the mouse is not hovering over it.
By combining HTML, CSS, and JavaScript, you can easily change the button color on hover to enhance the user experience on your website or application.
\
---
Original Source: https://answers.mindstick.com/qa/93771/how-to-change-button-color-on-hover-in-javascript
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.