Skip to content
Related Articles

Related Articles

How to create a Ripple Effect on Click the Button ?

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 24 Apr, 2020
Improve Article
Save Article

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.

    <!DOCTYPE html>
            Button Ripple Effect - GFG
            /* 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);
        <button class="btn">
            Enter GeeksforGeeks


  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.

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

  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.

        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
            // Add span to the button 
            // Get position of X
            let x = e.clientX -;
            // Get position of Y 
            let y = e.clientY -;
            // Position the span element
   = `${x}px`;
   = `${y}px`;
            // Remove span after 0.3s
            setTimeout(() => {
            }, 300);

The final output will be look something like below:

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!