/*!
 * Pure CSS ripple effect (no JavaScript)
 * Version - 1.0.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 * Copyright (c) 2021 by Rüdiger Alte (https://codepen.io/drralte/pen/xmzPZe)
 */

 .ripple {
	display: inline-block;
	position: relative;
	overflow: hidden;
	transition: all ease-in-out .25s;
}

.ripple::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 25%;
	height: 100%;
	width: 50%;
	background-color: #000;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: all ease-in-out 0.5s;
	transform: scale(5, 5);
}

.ripple:active::after {
	padding: 0;
	margin: 0;
	opacity: .2;
	transition: 0s;
	transform: scale(0, 0);
}