Author avatar

Ashutosh Singh

Create a Hover Button in a React App

Ashutosh Singh

  • Sep 17, 2020
  • 12 Min read
  • 496 Views
  • Sep 17, 2020
  • 12 Min read
  • 496 Views
Web Development
Front End Web Development
Client-side Frameworks
React

Introduction

This guide will discuss the step-by-step process of creating a hover button in a React app. We will see two methods of creating a hover button: using pure CSS and using mouse events in the React app. We will also discuss different effects of a hover button such as grow, shrink, change color, etc.

Using Hover Selector

In this section, you will create a button with a hover effect using pure CSS, with :hover selector. When a hover selector is used with an element, that element gets selected when you hover over it.

This example has a div with className="example" and a blue background:

1
2
3
4
5
6
7
8
9
10
import React from "react";
import "./style.css";

export default function App() {
  return (
    <div className="example">
    
    </div>
  );
}
JSX

Here is the CSS for this div:

1
2
3
4
5
6
.example {
    background: blue;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}
CSS

Here is how this div will look:

Blue div

If you add a :hover selector to this div then as long as you are hovering over the div, the CSS inside :hover will take effect.

1
2
3
.example:hover {
    background: black;
}
CSS

In this case, background property inside .example:hover{} will override the background property under .example as long as you move your mouse over it.

Hover Effect

You can explore this example on Stackbitz.

Creating a Button

Create a simple button with className="click" in your App.js file like this:

1
2
3
4
5
6
7
8
9
10
11
import React from "react";
import './App.css'
function App() {
  return (
    <div className="App">
    <button className="click">Click Me!</button>
    </div>
  );
}

export default App;
JSX

Here is how your button will look like by default, without any custom styling.

Default_Button

Style this button by adding the following code in the App.css file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html {
    background: #b19cd9;
}

.App {
    display: flex;
}

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

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

Styled_button

Now you will add the effects that will be seen when you hover on the button.

  • Opacity
    Opacity refers to the transparency of an element. Add the following code to App.css for the opacity hover effect.
1
2
3
.click:hover {
    opacity: 0.3;
}
CSS

You can see the above code in action by hovering on the button.

Opacity_effect

  • Color Change
    As discussed in the above example, you can change the button's color using a hover selector like this.
1
2
3
.click:hover {
    background: palegreen;
}
CSS

Here is the above code in action.

Color_change

  • Grow/Shrink
    You can grow or shrink an element using the scale() function in CSS. You can read more about this here.

To create a grow hover effect, add scale() to the transform property. The number inside scale() represents the scaling vector.

1
2
3
.click:hover {
    transform: scale(2);     /* Equal to scaleX(2) scaleY(2) */
}
CSS

Here is how this will look.

Grow_sudden

As you can see above, the transformation is instantaneous and doesn't look right. You can fix this by adding a delay using the transition-duration property.

1
2
3
4
.click:hover {
    transform: scale(2);
    transition-duration: 0.5s;
}
CSS

You can see this delay in transformation here.

grow_delay

Using the same scale() function, you can also shrink an element. To shrink an element, you have to specify a number less than one inside scale() like this.

1
2
3
4
.click:hover {
    transform: scale(0.6);
    transition-duration: 0.5s;
}
CSS

Here is how this effect will look.

shrink

You can explore this example here.

Using Mouse Events

In this section, you will create a button with a hover effect using mouse events in React. Based on the app requirements, you can use different mouse events such as onClick, onContextMenu, onDoubleClick, onDrag, onDragEnd, etc. You can see the complete list here.

For hover effect you will use onMouseEnter and onMouseLeave events. As the name suggests, onMouseEnter will be triggered when the mouse enters an element, and onMouseLeave will be triggered when the mouse leaves an element. This will be more apparent with an example.

Example

Consider a div that is the same as the blue div discussed in the example above. Here is the code for a blue div with inline styling:

1
2
3
4
5
6
7
import React from "react";

export default function App() {
 return (
   <div style={{ width: "400px", height: "400px", background: "blue" }}></div>
 );
}
JSX

Here is how this div will look.

Blue div

Now add the onMouseEnter event to this div. This event will take an arrow function, which will log the event name in the console. It is crucial to use the arrow function; otherwise, the event will only occur once, when the component is mounted.

1
2
3
4
5
6
7
8
return (
  <div
    onMouseEnter={() => {
      console.log("Event:MouseEnter");
    }}
    style={{ width: "400px", height: "400px", background: "blue" }}
  ></div>
);
JSX

Open the console by pressing CTRL + Shift + K in Firefox or CTRL + Shift + J in Chrome. Now try hovering over the div. You will see that the event name is logged in the console.

example

You can similarly add an onMouseLeave event to this div.

1
2
3
4
5
6
7
8
9
<div
  onMouseEnter={() => {
    console.log("Event:MouseEnter");
  }}
  onMouseLeave={() => {
    console.log("Event:MouseLeave");
  }}
  style={{ width: "400px", height: "400px", background: "blue" }}
></div>;
JSX

Here is the above code in action. example

You can explore this example on Stackblitz.

Creating a Button

Add the following code to App.js to create a simple button. The style object styles is used with the inline style attribute.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from "react";

function App() {
  const styles = {
    width: "100px",
    fontSize: "20px",
    borderRadius: "40px",
    border: "1px solid black",
    color: "#fafafa",
    margin: "0.5em 1em",
    padding: "0.25em 1em",
    background: "#c83f49",
  };

  return (
    <div className="App">
      <button  style={styles}>
        {" "}
        Red
      </button>
    </div>
  );
}

export default App;
JSX

Here is how this button will look.

red button

For this example, you will use mouse events to change states with React hooks. When the user hovers over the button, the entire app's background color will be changed according to the button's color, Red or #c83f49 (hex code for strawberry red).

Import useState in App.js file.

1
import React, {useState} from "react";
JSX

Next, define a new state bgColour and give it an initial value of #fafafa. This is the hex code for very light gray.

1
2
3
4
5
6
7
8
import React, {useState} from "react";

function App() {

const [bgColour, setBgColour] = useState("#fafafa")

...
}
JSX

Set this state as the background color of the app. For this, you will need to create another style object named appStyles for the div with className="App". For the background property, add the state bgColour using the template literals.

1
2
3
4
5
6
7
8
9
10
function App() {

const [bgColour, setBgColour] = useState("#fafafa")

const appStyles={
  height:"100vh",
  background:`${bgColour}`
}
...
}
JSX

Add this appStyles object to the div.

1
2
<div className="App" style={appStyles}>
</div>
JSX

You will see that the app's background color will change, though the change is very slight.

For the final step, you will add the onMouseEnter and onMouseLeave events to this button. Inside the arrow function, you will update the bgColour state with the #c83f49 when the onMouseEnter event is triggered and revert it back to #fafafa when the mouse leaves the button or onMouseLeave event is triggered using setBgColour() function.

1
2
3
4
5
6
7
8
9
10
11
12
13
  return (
    <div className="App" style={appStyles}>
      <button
        className="primary"
        style={styles}
        onMouseEnter={() => setBgColour("#c83f49")}
        onMouseLeave={() => setBgColour("#fafafa")}
      >
        {" "}
        Red
      </button>
    </div>
  );
JSX

And it's done, you can see the above code in action.

red button hover

Here is the complete code for this background color changing hover effect.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React, { useState } from "react";

function App() {
  const [bgColour, setBgColour] = useState("#fafafa");

  const appStyles = {
    height: "100vh",
    background: `${bgColour}`,
  };

  const styles = {
    width: "100px",
    fontSize: "20px",
    borderRadius: "40px",
    border: "1px solid black",
    color: "white",
    margin: "0.5em 1em",
    padding: "0.25em 1em",
    background: "#c83f49",
  };

  return (
    <div className="App" style={appStyles}>
      <button
        style={styles}
        onMouseEnter={() => setBgColour("#c83f49")}
        onMouseLeave={() => setBgColour("#fafafa")}
      >
        {" "}
        Red
      </button>
    </div>
  );
}

export default App;
JSX

You can explore this example on Stackblitz.

Conclusion

In this guide, we discussed two methods of creating a hover button in a React app. The first method, pure CSS, is ideal for when the button itself does transformations such as grow, shrink, etc. The second method, using mouse events, is perfect when hovering on a button changes React components.

Here are a few resources that you may find useful:

Happy coding!

3