Ripple Effect

by Sasabee

HTML

<link href="https://fonts.googleapis.com/css2?family=Geo&display=swap" rel="stylesheet">
<div class="btn" />

CSS

.btn {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	width: 300px;
	height: 50px;
	line-height: 50px;
	border-radius: 25px;
	text-align: center;
	background-color: #27253C;
}

.btn::after {
	content: "BUTTON";
	color: #E4E6CF;
	font-size: 32px;
	letter-spacing: 1px;
}

.ripple {
	position: absolute;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.7);
	animation: ripple 500ms ease-out;
}

@keyframes ripple {
	from {
		transform: scale(0);
		opacity: 1;
	}
	to {
		transform: scale(2);
		opacity: 0;
	}
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #B39E7D;
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	font-family: Geo, sans-serif;
}

JavaScript

const btn = document.querySelector('.btn');

btn.addEventListener('click', (e)=>{
	const el = e.target;
	const ripple = document.createElement('span');
	const wh = Math.max(el.clientWidth, el.clientHeight);
	const half = wh / 2;
	ripple.style = `width:${wh}px;height:${wh}px;left:${e.layerX - half}px;top:${e.layerY - half}px`;
	ripple.classList.add('ripple');
	el.appendChild(ripple);
});

btn.addEventListener('animationend', (e)=>{
	e.currentTarget.querySelector('.ripple').remove();
});