How to change button color on hover in JavaScript?

Asked 19-Jul-2021
Updated 16-Jun-2023
Viewed 518 times

3 Answers


0

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

<button id="myButton">Hover over me</button>
  1. CSS: Define the default button style and the hover style in your CSS. For example:

cssCopy code

#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

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.

 


 


0

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

<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title>Hover Me</title>
    <style>
        * {
            text-align:center;
            margin:50px;
        }
        #btn {
            background-color:lightblue;
            width:30%;
            height:70px;
            border:1px solid white;
            border-radius:10px;
            color:white;
            transition:0.3s;
            font-size:15px;
        }
            #btn:hover {
                font-size:25px;
                background-color:orange;
                border:2px solid white;
            }
    </style>
</head>
<body>
    <button id='btn' >Hover Me</button>
</body>
</html>

2

We know that, in CSS psuedo selector is use to decorating the page elements.

    <!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title></title>
    <style>
        * {
            text-align:center;
            margin:50px;
        }
        #btn {
            background-color:lightblue;
            width:30%;
            height:70px;
            border:1px solid white;
            border-radius:10px;
            color:white;
            transition:0.3s;
            font-size:15px;
        }
            #btn:hover {
                font-size:25px;
                background-color:orange;
                border:2px solid white;
            }
    </style>
</head>
<body>
    <button id='btn' >Hover Me</button>
</body>
</html>