How to Add Hover Bounce Effect to Button in CSS

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

Adding a bounce effect to a button on hover can enhance user interaction by providing a fun and dynamic visual cue. This effect can be achieved using CSS animations with @keyframes and the transform property. When the user hovers over the button, it will bounce, creating a more engaging user experience.

In this tutorial, you'll learn how to create a bounce effect on button hover using CSS.

Problem Statement

Create CSS code that:

Styles a button.
Adds a bounce effect when the button is hovered.

Example:

Input: A button element with text "Hover Me".
Output: When hovered, the button will bounce up and down.

Solution Steps

Use the <button> Element: Create a button using HTML.
Style the Button: Use CSS to define the appearance of the button.
Create Bounce Effect: Use @keyframes and transform properties to create the bounce effect on hover.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bounce Effect Button</title>
    <style>
        /* Step 1: Style the button */
        .bounce-button {
            font-size: 1.5rem;
            color: white;
            background-color: #3498db;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-block;
            position: relative;
        }

        /* Step 2: Define the bounce animation */
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0); /* Initial position */
            }
            50% {
                transform: translateY(-10px); /* Bounce upward */
            }
        }

        /* Step 3: Apply the bounce effect on hover */
        .bounce-button:hover {
            animation: bounce 0.5s ease; /* Trigger the bounce effect on hover */
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 100px;">
        <button class="bounce-button">Hover Me</button>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Style the Button

The .bounce-button class defines the basic styling of the button, including font size, background color, padding, and border.

.bounce-button {
    font-size: 1.5rem;
    color: white;
    background-color: #3498db; /* Blue background */
    padding: 12px 30px; /* Padding inside the button */
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: all 0.3s ease; /* Smooth transition */
    display: inline-block;
    position: relative;
}

transition: all 0.3s ease: Ensures smooth transitions for any animations applied to the button.

Step 2: Define the Bounce Animation

The @keyframes rule is used to define the bounce effect. The button will bounce upward and return to its original position.

@keyframes bounce {
    0%, 100% {
        transform: translateY(0); /* Initial and final position */
    }
    50% {
        transform: translateY(-10px); /* Move upward by 10px */
    }
}

transform: translateY(-10px): Moves the button upward by 10px, creating the bounce effect.
0%, 100%: The button starts and ends at its original position.

Step 3: Apply the Bounce Effect on Hover

The bounce effect is triggered when the user hovers over the button using the :hover pseudo-class.

.bounce-button:hover {
    animation: bounce 0.5s ease; /* Trigger bounce on hover */
}

animation: bounce 0.5s ease: The bounce animation lasts for 0.5 seconds and has a smooth easing effect.

Customization

Change the Bounce Height

You can adjust the height of the bounce by changing the translateY value:

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* Higher bounce */
    }
}

Adjust the Bounce Speed

To make the bounce faster or slower, change the duration of the animation:

.bounce-button:hover {
    animation: bounce 1s ease; /* Slower bounce */
}

Bounce Continuously on Hover

To make the button continuously bounce while hovered, modify the animation so it repeats:

.bounce-button:hover {
    animation: bounce 0.5s ease infinite; /* Continuous bounce on hover */
}

Add Shadow Effect

You can add a shadow to the button for a more dynamic look:

.bounce-button {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds a soft shadow */
}

.bounce-button:hover {
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
}

Conclusion

Adding a bounce effect to a button on hover can make the button more interactive and engaging. By using @keyframes and transform, you can create a smooth bounce animation that enhances user experience. This effect is easy to customize by adjusting the bounce height, speed, or adding additional effects like shadows.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog