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:


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

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.

React, Click, Hover, Button

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

React, Click, Hover, Button

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts