如何通过css制作按钮点击水波纹效果

<button class="ripple-btn">点击我</button>

.ripple-btn {
  position: relative;
  overflow: hidden;
  padding: 12px 24px;
  font-size: 16px;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.ripple-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1s ease-out, transform 1s ease-out, width 1s ease-out, height 1s ease-out;
  pointer-events: none;
}

.ripple-btn:active::after {
  width: 200px;
  height: 200px;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

document.querySelectorAll('.ripple-btn').forEach(button => {
  button.addEventListener('click', function (e) {
    const ripple = document.createElement('span');
    const rect = this.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    const x = e.clientX - rect.left - size / 2;
    const y = e.clientY - rect.top - size / 2;

    ripple.style.cssText = `
      position: absolute;
      width: ${size}px;
      height: ${size}px;
      left: ${x}px;
      top: ${y}px;
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      transform: scale(0);
      animation: ripple-effect 0.6s ease-out;
      pointer-events: none;
    `;

    this.appendChild(ripple);

    setTimeout(() => {
      ripple.remove();
    }, 600);
  });
});

@keyframes ripple-effect {
  to {
    transform: scale(2);
    opacity: 0;
  }
}