Ashutosh Singh

Create a Hover Button in a React App

Ashutosh Singh

Sep 17, 2020
12 Min read
119,521 Views

Sep 17, 2020
12 Min read
119,521 Views

Web Development

Client-side Frameworks

React

Front End Web Development

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:

1import React from "react";
2import "./style.css";
3
4export default function App() {
5  return (
6    <div className="example">
7    
8    </div>
9  );
10}

JSX

Here is the CSS for this div:

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

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.example:hover {
2    background: black;
3}

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:

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

1html {
2    background: #b19cd9;
3}
4
5.App {
6    display: flex;
7}
8
9.click {
10    width: 300px;
11    background: white;
12    font-size: 40px;
13    margin: 100px auto;
14    padding: 10px;
15    cursor: pointer;
16}

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.click:hover {
2    opacity: 0.3;
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.click:hover {
2    background: palegreen;
3}

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.click:hover {
2    transform: scale(2);     /* Equal to scaleX(2) scaleY(2) */
3}

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.click:hover {
2    transform: scale(2);
3    transition-duration: 0.5s;
4}

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.click:hover {
2    transform: scale(0.6);
3    transition-duration: 0.5s;
4}

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:

1import React from "react";
2
3export default function App() {
4 return (
5   <div style={{ width: "400px", height: "400px", background: "blue" }}></div>
6 );
7}

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.

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

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

1import React from "react";
2
3function App() {
4  const styles = {
5    width: "100px",
6    fontSize: "20px",
7    borderRadius: "40px",
8    border: "1px solid black",
9    color: "#fafafa",
10    margin: "0.5em 1em",
11    padding: "0.25em 1em",
12    background: "#c83f49",
13  };
14
15  return (
16    <div className="App">
17      <button  style={styles}>
18        {" "}
19        Red
20      </button>
21    </div>
22  );
23}
24
25export 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.

1import 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.

1import React, {useState} from "react";
2
3function App() {
4
5const [bgColour, setBgColour] = useState("#fafafa")
6
7...
8}

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.

1function App() {
2
3const [bgColour, setBgColour] = useState("#fafafa")
4
5const appStyles={
6  height:"100vh",
7  background:`${bgColour}`
8}
9...
10}

JSX

Add this appStyles object to the div.

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

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.

1import React, { useState } from "react";
2
3function App() {
4  const [bgColour, setBgColour] = useState("#fafafa");
5
6  const appStyles = {
7    height: "100vh",
8    background: `${bgColour}`,
9  };
10
11  const styles = {
12    width: "100px",
13    fontSize: "20px",
14    borderRadius: "40px",
15    border: "1px solid black",
16    color: "white",
17    margin: "0.5em 1em",
18    padding: "0.25em 1em",
19    background: "#c83f49",
20  };
21
22  return (
23    <div className="App" style={appStyles}>
24      <button
25        style={styles}
26        onMouseEnter={() => setBgColour("#c83f49")}
27        onMouseLeave={() => setBgColour("#fafafa")}
28      >
29        {" "}
30        Red
31      </button>
32    </div>
33  );
34}
35
36export 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:

:hover - MDN Web Docs

Mouse Events

Happy coding!

LEARN MORE