How to create a Ripple Effect on Click the Button ? - GeeksforGeeks

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.
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: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>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:Create span element and add ripple class to it.Get the clicked position of cursor using event variable.Set the position of the span element.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>
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:
<!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:
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>
<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>
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:Create span element and add ripple class to it.Get the clicked position of cursor using event variable.Set the position of the span element.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>
Create span element and add ripple class to it.Get the clicked position of cursor using event variable.Set the position of the span element.Remove the span element to avoid spamming of span elements in button.
Create span element and add ripple class to it.
Get the clicked position of cursor using event variable.
Set the position of the span element.
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:
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
Write From Home
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to position a div at the bottom of its container using CSS?
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
CSS | :not(:last-child):after Selector
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)