javascript hover featured image

using javascript Hover effect to change button color

Knowing how to use JavaScript hover effect is always a plus, The hover effect is one interesting design to always incorporate In your web project, be it for a client or a personal project. its also a common way of using the project to test your JavaScript knowledge at the beginners stage of learning JavaScript.

Whenever a user hover on a button, they usually expect a change to occur, the change could be;

  1. A change in the text color of the button.
  2. A change in the background color of the button.

using CSS to change button color on hover

To change the button color on hover using css is quite straightforward , in fact, with two lines of code you can apply that effect.

just to recall, the css code to apply hover effect to change a button color is;

button: hover{

color: red;

background-color: white;

}

button before hover
buttion without hover
button with javascript hover effect
button after hover

using JavaScript to change button color on hover

With CSS aside, let us proceeds to using JavaScript. One thing to note here is that, implementing the hover effect using JavaScript is not the same as implementing it using css, but then, it is not a reason to panic as the code below will guide you on how to change a button color using JavaScript.

   Supposing you have your html code as

<body>

 <button id=”btn”>submit</button>

</body>

To accomplish this, we need to use an event, and I pretty sure you know there are various events in JavaScript such as click, submit, load, mouseout, mouseover and lots more. To see other JavaScript event types click here

But those events are not our focus, in fact; our focus is mouseover event because that is the event that is going to help us accomplish our goal. And here is the JavaScript code to change our button color.

 <script>

//we are targeting the button in our html document using its ID

 const btn = document.getElementById(“btn”)

//we are adding the mouseover event to the button

btn.addEventListener(“mouseover”,add)

function add(){

        btn.classList.add(“hover”)

}

    </script>

The main point again is that, applying hover effect in javascript requires using the mouseover event after targeting the element and the specifying the change should occur on hover.

While this works, there is a little problem, you would notice that, once you add the class using the mouseover event, the class remains on the button, this means the button color do not change back to its default. And so, to change this, we have to use the mouseout event to reverse it back to its default styling.

 And here is the mouseout event to return the button styling to its default

btn.addEventListener(“mouseout”,remove)

function remove() {

    btn.classList.remove(“hover”)

  }

you can click here to learn how to change both the button color and the text content of your button using javascript

1 thought on “using javascript Hover effect to change button color”

  1. Pingback: Javascript Hover Effect and how to apply it - Techknowmore

Leave a Comment

Your email address will not be published. Required fields are marked *