How can I change the background color of a button when it's hovered over?
Asked on Oct 13, 2025
Answer
To change the background color of a button when it's hovered over, you can use the CSS `:hover` pseudo-class. This allows you to apply specific styles when the user hovers over the button with their mouse.
<!-- BEGIN COPY / PASTE -->
<button class="my-button">Hover Me!</button>
<style>
.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.my-button:hover {
background-color: green;
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
- The `:hover` pseudo-class is used to apply styles when the mouse is over an element.
- In this example, the button's background color changes from blue to green when hovered.
- Ensure the button has a `cursor: pointer;` style for a better user experience.
- CSS transitions can be added for smooth color changes, if desired.
Recommended Links: