How to create a Ripple Effect on Click the Button ?

Last Updated : 11 Oct, 2024

A Ripple Effect on button click is a visual animation where a wave-like circle spreads outward from the click point, simulating a water ripple. This effect enhances user interaction feedback, making button clicks feel more dynamic and visually engaging.

Approach

HTML Structure: Uses an <button> element with the class .btn for applying the ripple effect.
CSS Button Styling: The .btn class styles the button with padding, background color, rounded corners, and shadow.
CSS Ripple Animation: Defines a circular span with @keyframes ripple to animate opacity and s for the effect.
JavaScript Click Event: Listens for the button click event and creates a new <span> element for the ripple.
Position Ripple: Calculates the click’s position relative to the button and positions the ripple accordingly.
Remove Ripple: Removes the ripple element after 0.3 seconds to clear the effect once the animation completes.

Example: This code creates a water-like ripple effect when you click a button, using JavaScript to add a small circle where you click, and CSS to animate the ripple as it grows and fades away.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        Button Ripple Effect - GFG
    </title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <button class="btn">
        Enter GeeksforGeeks
    </button>
    <script src="script.js"></script>
</body>

</html>

CSS

  /* 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);
  }

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

JavaScript

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.currentTarget.offsetLeft;

    // Get position of Y
    let y = e.clientY - e.currentTarget.offsetTop;

    // Position the span element
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;

    // Remove span after 0.3s
    setTimeout(() => {
        ripple.remove();
    }, 300);

};