How to create a Ripple Effect on Click the Button ?

Ripple effect is a part of the modern design trend. You have seen it on many websites specially on Google’s material design language. It gives a button pressing effect. We can make a ripple effect by adding and animating a child element to the button. We can also position it according to the position of the cursor on the button using Javascript.

  1. Basic styling: Add basic styling to the button with a position:relative attribute to position the inner span tag and overflow:hidden to prevent span going outside of button.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Button Ripple Effect - GFG
        </title>
      
        <style>
      
            /* Adding styles to button */
            .btn {
                padding: 12px 50px;
                border: none;
                border-radius: 5px;
                background-color: #1abc9c;
                color: #fff;
                font-size: 18px;
                outline: none;
                cursor: pointer;
      
                /* We need this to position
                    span inside button */
                position: relative;
                overflow: hidden;
                box-shadow: 6px 7px 40px -4px 
                         rgba(0, 0, 0, 0.2);
            }
        </style>
    </head>
      
    <body>
        <button class="btn">
            Enter GeeksforGeeks
        </button>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  2. Add styling to the span element: Now adding the style for the span element that will show up on the click of a button.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
        .btn span {
            position: absolute;
            border-radius: 50%;
            /* To make it round */
            background-color: rgba(0, 0, 0, 0.3);
      
            width: 100px;
            height: 100px;
            margin-top: -50px;
            /* for positioning */
            margin-left: -50px;
      
            animation: ripple 1s;
            opacity: 0;
        }
      
        /* Add animation */
        @keyframes ripple {
            from {
                opacity: 1;
                transform: scale(0);
            }
      
            to {
                opacity: 0;
                transform: scale(10);
            }
        }
    </style>

    chevron_right

    
    

  3. Adding JavaScript: Now we’ll add the span element on button click with position according to the mouse click. On button click we have to do the following:
    1. Create span element and add ripple class to it.
    2. Get the clicked position of cursor using event variable.
    3. Set the position of the span element.
    4. Remove the span element to avoid spamming of span elements in button.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        const btn = document.querySelector(".btn");
      
        // Listen for click event
        btn.onclick = function (e) {
      
            // Create span element
            let ripple = document.createElement("span");
      
            // Add ripple class to span
            ripple.classList.add("ripple");
      
            // Add span to the button 
            this.appendChild(ripple);
      
            // Get position of X
            let x = e.clientX - e.target.offsetLeft;
      
            // Get position of Y 
            let y = e.clientY - e.target.offsetTop;
      
            // Position the span element
            ripple.style.left = `${x}px`;
            ripple.style.top = `${y}px`;
      
            // Remove span after 0.3s
            setTimeout(() => {
                ripple.remove();
            }, 300);
      
        };
    </script>

    chevron_right

    
    

The final output will be look something like below:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.