Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to create a Ripple Effect on Click the Button ?

  • Difficulty Level : Basic
  • Last Updated : 24 Apr, 2020

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  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.




    <!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>

    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.




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




    <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>

The final output will be look something like below:




My Personal Notes arrow_drop_up
Recommended Articles
Page :