How to Create a Ripple Effect Button in CSS

Introduction

A ripple effect button adds a visual ripple animation that originates from the point of click and expands outward. This is commonly seen in Material Design buttons, enhancing user interaction and making the button feel more dynamic. You can create a ripple effect using HTML, CSS, and a bit of JavaScript for triggering the ripple animation on click.

In this tutorial, you'll learn how to create a ripple effect button using CSS and JavaScript.

Problem Statement

Create a CSS and JavaScript code that:

Styles a button.
Adds a ripple effect when the button is clicked.

Example:

Input: A button element with the text "Ripple Button".
Output: A button that displays a ripple animation when clicked.

Solution Steps

Use the <button> Element: Create the button in HTML.
Style the Button: Use CSS to define the button’s basic appearance.
Create the Ripple Effect: Use CSS for the ripple animation and JavaScript to trigger it on click.

HTML Structure

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

        /* Step 2: Style the ripple */
        .ripple {
            position: absolute;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.6);
            width: 20px;
            height: 20px;
            animation: ripple-animation 0.6s linear;
            transform: scale(0);
        }

        /* Step 3: Keyframes for ripple animation */
        @keyframes ripple-animation {
            to {
                transform: scale(10);
                opacity: 0;
            }
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 100px;">
        <button class="ripple-button">Ripple Button</button>
    </div>

    <script>
        // Step 4: Add JavaScript for the ripple effect
        document.querySelector('.ripple-button').addEventListener('click', function(e) {
            const button = e.currentTarget;
            const ripple = document.createElement('span');
            const size = Math.max(button.offsetWidth, button.offsetHeight);
            const x = e.pageX - button.offsetLeft - size / 2;
            const y = e.pageY - button.offsetTop - size / 2;

            ripple.style.width = ripple.style.height = `${size}px`;
            ripple.style.left = `${x}px`;
            ripple.style.top = `${y}px`;
            ripple.classList.add('ripple');

            button.appendChild(ripple);

            // Remove the ripple after animation
            ripple.addEventListener('animationend', () => {
                ripple.remove();
            });
        });
    </script>

</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 .ripple-button class is used to style the button, including setting position: relative to allow the ripple to position itself inside the button.

.ripple-button {
    position: relative;
    overflow: hidden; /* Ensures the ripple stays inside the button */
    font-size: 1.2rem;
    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: background-color 0.3s ease; /* Smooth transition */
}

position: relative: This allows the ripple effect to position itself inside the button.
overflow: hidden: Ensures the ripple doesn't go outside the button's boundaries.

Step 2: Style the Ripple

The .ripple class is dynamically added to the button when it's clicked. This class is responsible for the ripple’s appearance and animation.

.ripple {
    position: absolute;
    border-radius: 50%; /* Circle shape */
    background-color: rgba(255, 255, 255, 0.6); /* Light ripple color */
    width: 20px;
    height: 20px;
    animation: ripple-animation 0.6s linear;
    transform: scale(0); /* Start small */
}

position: absolute: This allows the ripple to be positioned relative to the button.
transform: scale(0): The ripple starts small and grows outward during the animation.

Step 3: Add Keyframes for the Ripple Animation

The @keyframes rule is used to animate the ripple’s growth and fading effect.

@keyframes ripple-animation {
    to {
        transform: scale(10); /* Grow the ripple */
        opacity: 0; /* Fade out the ripple */
    }
}

transform: scale(10): This makes the ripple expand outward.
opacity: 0: The ripple fades out as it expands.

Step 4: JavaScript to Trigger the Ripple

In JavaScript, we listen for the button's click event and dynamically create the ripple effect based on the click position.

document.querySelector('.ripple-button').addEventListener('click', function(e) {
    const button = e.currentTarget;
    const ripple = document.createElement('span');
    const size = Math.max(button.offsetWidth, button.offsetHeight);
    const x = e.pageX - button.offsetLeft - size / 2;
    const y = e.pageY - button.offsetTop - size / 2;

    ripple.style.width = ripple.style.height = `${size}px`;
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;
    ripple.classList.add('ripple');

    button.appendChild(ripple);

    ripple.addEventListener('animationend', () => {
        ripple.remove();
    });
});

const size = Math.max(button.offsetWidth, button.offsetHeight): Calculates the size of the ripple based on the button dimensions.
ripple.addEventListener('animationend', () => { ripple.remove(); }): Removes the ripple element after the animation completes.

Conclusion

You can create a ripple effect button using HTML, CSS, and JavaScript. The @keyframes animation and the transform property allow the ripple to grow and fade out, while JavaScript dynamically triggers the effect on click. This technique is often used to enhance user experience by making buttons more interactive.

Java Guides

Search This Blog