What is Awesome Button Hover Effects in React?

In this article, we will learn Awesome Button Hover Effects in React,This free React tutorial for complete beginners will help you learn React from scratch.

Awesome Button Hover Effects in React

Effect Hooks in React

Buttons play an important role in user interfaces, and adding hover effects can improve the overall user experience. In this tutorial, you’ll explore step-by-step instructions to implement creating awesome button hover effects in a React application.

Preview Image: Let us have a look at how the buttons will look like.

preview

Prerequisites

React
Node and npm installed
CSS

We will discuss the following approaches to create Awesome Button Hover Effects in React

Table of Content

1. Using Scale Effect with Background Color Change
2. Using Shadow Effect with Border Radius Change
3. Using Slide In Effect with Gradient Hover Effect
4. Using Rotate Effect
5. Using Flip Effect

Steps to Create Application

Step 1: Create a new React app using vite

npx create-vite@latest awesome-button-app --template react
cd awesome-button-app
npm install

Step 2: Create a Components folder and Create “Button.jsx” and ” Button.css” files.

Folder Structure:

Folder Structure

The updated dependencies in package.json file will look lik:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.0.8"
}

Example: Write these code in the respective files.

Javascript

// Button.jsx
 
import React from 'react';
import './Button.css';
 
const Button = ({ text, effectType }) => {
  return (
    <button style={{ margin: "10px" }} className={`custom-button ${effectType}`}>
      {text}
    </button>
  );
};
 
export default Button;

Javascript

//App.js
 
import React from 'react';
import Button from './Components/Button';
import './App.css';
 
function App() {
    return (
        <div className="App">
            <header className="App-header">
                <h1 style={{ textAlign: "center" }} 
                    className="button-heading">w3wiki</h1>
                <h4 style={{ textAlign: "center" }}> 
                    Awesome Button Hover Effects
                </h4>
            </header>
 
            <Button text="Hover Effect 1" effectType="effect1" />
            <Button text="Hover Effect 2" effectType="effect2" />
            <Button text="Hover Effect 3" effectType="effect3" />
            <Button text="Hover Effect 4" effectType="effect4" />
            <Button text="Hover Effect 5" effectType="effect5" />
        </div>
    );
}
 
export default App;

CSS

/* Button.css */
.effect1 {
    transition: transform 0.3s, background-color 0.3s, color 0.3s;
}
 
.effect1:hover {
    transform: scale(1.1);
    background-color: #4caf50;
    color: white;
}
 
/* Button.css */
.effect2 {
    transition: box-shadow 0.3s, border-radius 0.3s;
}
 
.effect2:hover {
    box-shadow: 0 4px 8px rgba(94, 203, 233, 0.2);
    border-radius: 20px;
}
 
/* Button.css */
.effect3 {
    transition: transform 0.3s, background-position 0.5s ease;
}
 
.effect3:hover {
    transform: translateX(10px);
    background-position: right bottom;
}
 
/* Button.css */
.effect4 {
    transition: transform 0.3s;
}
 
.effect4:hover {
    transform: rotate(45deg);
}
 
/* Button.css */
.effect5 {
    transition: transform 0.3s;
}
 
.effect5:hover {
    transform: scaleX(-1);
}

1. Using Scale Effect with Background Color Change

The button smoothly scales up on hover, creating a subtle zoom-in effect. Simultaneously, the background color and text color change, providing a good looking transformation.

Code Syntax:

/* Button.css */
.effect1 {
  transition: transform 0.3s, background-color 0.3s, color 0.3s;
}
.effect1:hover {
  transform: scale(1.1);
  background-color: #4caf50;
  color: white;
}

Preview:

Hover Effect 1

2. Using Shadow Effect with Border Radius Change

As the button is hovered, a shadow appears around it, that giving the illusion of lift and depth. Additionally, the button’s corners gradually round, contributing to a sleek and modern appearance.

Code Syntax:

/* Button.css */
.effect2 {
  transition: box-shadow 0.3s, border-radius 0.3s;
}
.effect2:hover {
  box-shadow: 0 4px 8px rgba(94, 203, 233, 0.2);
  border-radius: 20px;
}

Preview:

3. Using Slide In Effect with Gradient Hover Effect

As you hover, it gracefully slides to the side while the background undergoes a smooth gradient transition. This combination brings both movement and color to your button.

Code Syntax:

/* Button.css */
.effect3 {
  transition: transform 0.3s, background-position 0.5s ease;
}
.effect3:hover {
  transform: translateX(10px);
  background-position: right bottom;
}

Preview:

Hover Effect 3

4. Using Rotate Effect

Add a playful twist to your button! When hovered, it rotates, providing a fun and interactive visual effect. It’s a simple yet engaging way to make your button more interesting.

Code Syntax:

/* Button.css */
.effect4 {
  transition: transform 0.3s;
}
.effect4:hover {
  transform: rotate(45deg);
}

Preview:

5. Using Flip Effect

Surprise your users with a unique twist! When hovered, the button flips horizontally, offering an unexpected and eye-catching transformation. This effect adds a touch of creativity to your button design.

Code Syntax:

/* Button.css */
.effect5 {
  transition: transform 0.3s;
}
.effect5:hover {
  transform: scaleX(-1);
}

Preview:

Hover Effect 5

Output:

Final Output

Tags:

#Geeks Premier League 2023 #Pigeonhole Principle #React-Animation #Geeks Premier League #ReactJS #Web Technologies

Effect Hooks in React