Ripple Button

buttons

CSS

HTML

<button class="btn">Click me</button>

JavaScript

document.querySelector('.btn').addEventListener('click', function(e) {
  const ripple = document.createElement('span');
  ripple.classList.add('ripple');
  this.appendChild(ripple);
  setTimeout(() => ripple.remove(), 600);
});

Live Preview

Edit the CSS on the left to see live changes. The styles are scoped to the preview area.