<button>
	<span class="frankenstein"></span>
	<span>Frankenstein</span>
</button>
@import url("https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap");

:root {
	--frankenstein: #2b921c;
	--cta: #fff;
	--wave-col: #141414;
	--wave-alpha: #14141480;
	--cta-size: 200px;
	--size-sm: 0.5rem;
	--size-md: 1rem;
	--font-size: 2rem;
	--font-family: "Comforter Brush";
	--radius: 3rem;
	--box-shadow: inset 0 0 50px rgb(0 0 0 / 90%);
}

body {
	padding: var(--size-md);
}

button {
	display: flex;
	justify-content: center;
	position: relative;
	color: var(--cta);
	width: var(--cta-size);
	padding: var(--size-sm);
	border-radius: var(--radius);
	border: none;
	overflow: hidden;
	cursor: pointer;

	&:hover .frankenstein {
		top: -110px;
	}

	span {
		position: relative;
		font-family: var(--font-family);
		font-size: var(--font-size);
	}

	& .frankenstein {
		position: absolute;
		top: -60px;
		left: 0;
		width: var(--cta-size);
		height: var(--cta-size);
		background: var(--frankenstein);
		box-shadow: var(--box-shadow);
		transition: 0.5s;
	}
}

button .frankenstein::after,
button .frankenstein::before {
	content: "";
	width: 250%;
	height: 250%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -75%);
	background: var(--cta);
}

button .frankenstein::before {
	border-radius: 45%;
	background: var(--wave-col);
	animation: frankenstein 5s ease-in infinite;
}

button .frankenstein::after {
	border-radius: 40%;
	background: var(--wave-alpha);
	animation: frankenstein 10s ease-in infinite;
}

@keyframes frankenstein {
	from {
		transform: translate(-50%, -75%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -75%) rotate(360deg);
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.