Ripple Click Button

<button class="ripple-btn" type="button">
  <span class="ripple-text">Click Me</span>
</button>

.ripple-btn{
  position:relative;
  padding:15px 34px;
  border:0;
  border-radius:10px;
  overflow:hidden;
  background:#8b5cf6;
  color:#ffffff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(139,92,246,.28);
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.ripple-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(139,92,246,.40);
}

.ripple-text{
  position:relative;
  z-index:2;
}

.ripple-circle{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  transform:scale(0);
  pointer-events:none;
  animation:rippleEffect .6s linear;
}

@keyframes rippleEffect{
  to{
    transform:scale(4);
    opacity:0;
  }
}

document.addEventListener('click', function(e) {

  const rippleButton = e.target.closest('.ripple-btn');

  if (rippleButton) {

    const circle = document.createElement('span');

    const size = Math.max(
      rippleButton.clientWidth,
      rippleButton.clientHeight
    );

    const rect = rippleButton.getBoundingClientRect();

    circle.classList.add('ripple-circle');

    circle.style.width = size + 'px';
    circle.style.height = size + 'px';

    circle.style.left =
      e.clientX - rect.left - size / 2 + 'px';

    circle.style.top =
      e.clientY - rect.top - size / 2 + 'px';

    rippleButton.appendChild(circle);

    setTimeout(function() {
      circle.remove();
    }, 600);
  }

});

How This Ripple Click Button Works

The Ripple Click Button combines CSS animation with a small amount of JavaScript to create an effect at the exact point where a user clicks. Its HTML uses a standard button element with a ripple-text span, while JavaScript dynamically creates the ripple circle during each click. You can learn more about how this method returns an element’s position and dimensions in the MDN Web Docs guide to getBoundingClientRect().

The button starts with a purple #8b5cf6 background, white text, rounded corners, and a soft shadow. On hover, translateY(-2px) lifts the button slightly while the shadow becomes stronger, giving the button a more responsive feel before the click effect begins.

When the button is clicked, JavaScript reads the click coordinates and compares them with the button’s position using getBoundingClientRect(). It then creates a new span with the ripple-circle class and places it at that exact point inside the button.

The ripple circle starts at scale(0) and expands using the rippleEffect keyframe animation. As it grows, its opacity fades to zero, creating the smooth white ripple effect. The button’s overflow: hidden property keeps the animation contained inside its rounded edges.

After the animation finishes, JavaScript removes the temporary ripple circle after 600ms. This keeps the button markup clean between clicks and allows the effect to run again each time the user interacts with the button.

Customizing This Ripple Click Button

You can customize the Ripple Click Button by changing a few CSS values without modifying its JavaScript logic. The button color, ripple appearance, animation speed, size, corner radius, and hover shadow can all be adjusted to match your website or interface design.

• Button color: Change #8b5cf6 in the .ripple-btn background to match your website’s color palette.
• Ripple color: Adjust rgba(255,255,255,.45) to change the color or transparency of the ripple.
• Animation speed: Change .6s in the rippleEffect animation to make the ripple expand faster or slower.
• Button size: Modify padding: 15px 34px to create a smaller or larger button.
• Corner radius: Adjust border-radius: 10px for sharper or more rounded corners.
• Hover effect: Change translateY(-2px) or the box-shadow values to control the lift and shadow strength.

Where to Use This Ripple Click Button

The Ripple Click Button works well in interfaces where click feedback helps make an action feel more responsive. Because the ripple begins exactly where the user clicks, it provides clear visual feedback without adding a heavy animation to the page.

• Call-to-action buttons: Use it for actions such as “Get Started,” “Learn More,” or “View Details.”
• Forms: Add it to submit, continue, or confirmation buttons where clear click feedback is useful.
• Dashboards: Use it for interactive controls and frequently used actions.
• Landing pages: Add the ripple effect to important conversion buttons.
• Web apps: Use it where users regularly interact with buttons and controls.
• Portfolio projects: A good choice for project links, contact actions, or demo buttons.

Because the ripple is generated only when the button is clicked and removed after the animation finishes, the component stays lightweight and reusable. The same JavaScript can also handle multiple .ripple-btn elements on the page without writing a separate click handler for each button.

If you want to explore another interactive button style, check out the Sliding Background Button, which uses a smooth CSS gradient animation that slides across the button on hover.

Frequently Asked Questions

Does the Ripple Click Button require JavaScript?
Yes. JavaScript detects the exact click position, creates the temporary ripple circle, places it inside the button, and removes it after the animation finishes.

How does the ripple start from the exact click position?
JavaScript uses the mouse coordinates together with getBoundingClientRect() to calculate where the click happened inside the button. The ripple circle is then positioned at that point before the animation starts.

Can I change the color of the ripple effect?
Yes. Change the rgba(255,255,255,.45) value in .ripple-circle to use a different ripple color or adjust its transparency.

Can I change the speed of the ripple animation?
Yes. Change the .6s duration in the .ripple-circle animation. A smaller value makes the ripple expand and fade faster, while a larger value creates a slower effect.

The Ripple Click Button adds clear visual feedback to a simple button without making the interaction feel excessive. Its CSS handles the styling and animation, while a small JavaScript function creates the ripple exactly where the user clicks, making the component practical, reusable, and easy to customize.