How to change button color on hover in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. how to change button color on hover in react js with code example.

To change button color on hover, put a click: hover and .background: #dfd9e9; class in your App.css

In this article, we will create a simple change button color on hover in React.js just like you would create in a normal HTML project.

To change button color on hover, a simple button with className="click" in your App.js .file like this:

Let’s look at the following example to understand how it basically works:

APP.js

import React from "react";
import './App.css'
function App() {
  return (
    <div className="App">
    <button className="click">Click Me!</button>
    </div>
  );
}

export default App;

Filename: App.css Now, let’s edit the file named App.css to style the hover. Style this button by adding the following code in the App.css file.

html {
  background: #dfd9e9;
}

.App {
  display: flex;
}

.click {
  width: 300px;
  background: white;
  font-size: 40px;
  margin: 100px auto;
  padding: 10px;
  cursor: pointer;
}

.click:hover {
  background: palegreen;
}

Color Change

As discussed in the above example, you can change the button’s color using a hover selector like this.

.click:hover {
  background: palegreen;
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Check the output of the above code example.

The above CSS code will change the app’s background color and style the button to look like this.

All the best 👍