react-ripple-click/dist/index.css

Ripple effect for your buttons.

@keyframes Ripple-module_ripple__KYPTO {
	0% {
		transform: scale(0);
		opacity: var(--Ripple-opacity);
	}
	30% {
		opacity: var(--Ripple-opacity);
	}
	70% {
		transform: none;
	}
	100% {
		opacity: 0;
	}
}

.Ripple-module_wrapper__hUTT1 {
	display: contents;
}

.Ripple-module_ripple__KYPTO {
	--Ripple-opacity: var(--Ripple-custom-opacity, 0.2);
	--Ripple-duration: var(--Ripple-custom-duration, 0.6s);
	--Ripple-timing-function: var(--Ripple-custom-timing-function, ease-in);
	--Ripple-color: var(--Ripple-custom-color, currentColor);
	position: absolute;
	z-index: -1;
	top: calc(-0.5 * var(--Ripple-size) + var(--Ripple-y));
	left: calc(-0.5 * var(--Ripple-size) + var(--Ripple-x));
	width: var(--Ripple-size);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: var(--Ripple-color);
	animation: Ripple-module_ripple__KYPTO var(--Ripple-duration) forwards
		var(--Ripple-timing-function);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.Ripple-module_ripple__KYPTO {
		animation-timing-function: step-start;
	}
}