How to add a Ripple Effect to your buttons - OXYGEN4FUN

/*CSS*/
span.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background-color: rgba(255, 255, 255, 0.7);
}

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

/*JS*/
function createRipple(event) {
  
	const button = event.currentTarget;
	const btnRect = button.getBoundingClientRect();
	const circle = document.createElement("span");
	const diameter = Math.max(btnRect.width, btnRect.height);
	const radius = diameter / 2;

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

	const ripple = button.getElementsByClassName("ripple")[0];

	if (ripple) {
		ripple.remove();
	}

	button.appendChild(circle);
}

const buttons = document.getElementsByClassName("ct-link-button");

for (const button of buttons) {
	button.addEventListener("click", createRipple);
}