How to add a Ripple Effect to your buttons

First, check this article to know how the effect is done:

How to Recreate the Ripple Effect of Material Design Buttons

Some little changes were made to make it work better with Oxygen.

For the CSS, we only need that part :

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;
  }
}

And here it is for the Javascript :

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);
}

Notice that the effect will be applied to all the buttons created with the Button element in Oxygen.

If you want to apply this effect to a particular button, you can replace the class ct-link-button by your own class.

New Style

You can change the effect by changing a few line of CSS.
Example with a square instead of a circle, that scale and rotate at the same time :

span.ripple {
  position: absolute;
  transform: rotate(0deg) scale(0);
  animation: ripple 600ms linear;
  background-color: rgba(0, 0, 0, 0.7);
}

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