Ripple effect on button

Result

How to do it?

<button>hi mom!</button>

button {
    position: relative;
    overflow: hidden;
    color: rgb(30, 29, 29);
    background-color: #AD343E;
    padding: 1rem 2rem;
    font-size: 1.5rem;
    outline: 0;
    border: 0;
    border-radius: 25px;
    cursor: pointer;
}

span.ripple {
  position: absolute; 
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background-color: #4747474e;
}

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

function createRipple(event) {
    const button = event.currentTarget; // this is the btn

    const circle = document.createElement("span");
    const diameter = Math.max(button.clientWidth, button.clientHeight); // span be based on the btn size
    const radius = diameter / 2;

    circle.style.width = circle.style.height = `${diameter}px`;
    circle.style.left = `${event.clientX - (button.offsetLeft + radius)}px`;
    circle.style.top = `${event.clientY - (button.offsetTop + radius)}px`;
    circle.classList.add("ripple"); 

    const ripple = button.getElementsByClassName("ripple")[0];
    if (ripple) {
    ripple.remove(); // remove any remaining ripples before adding another one
    }

    button.appendChild(circle);
}

document.getElementsByTagName('button')[0].addEventListener('click', createRipple);