body {
	background-color: white;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
}

:root {
	--squish-animation-time: 500ms;
	--progress-animation-time: 1000ms;
	--circle-animation-time: 300ms;
	--checkmark-animation-time: 300ms;
	--btn-width: 125px;
	--btn-height: 40px;
}

.btn {
	position: relative;
	background-color: #2B2D2F;
	color: #71DFBE;
	border: none;
	border-radius: .125em;
	width: var(--btn-width);
	height: var(--btn-height);
	font-weight: bold;
	cursor: pointer;
	padding: 0;
}

.btn:hover {
	-webkit-transition: border-color 0.3s ease-in-out;
	-moz-transition: border-color 0.3s ease-in-out;
	transition: border-color 0.3s ease-in-out;
	-webkit-transition: background 0.3s ease-in-out;
	-moz-transition: background 0.3s ease-in-out;
	transition: background-color 0.3s ease-in-out;
	background-color: #71DFBE;
	color: #2B2D2F;
}

.btn.animating {
	background-color: transparent;
	color: transparent;
	user-select: none;
	cursor: default;
	animation: hide 0ms calc(var(--squish-animation-time) + var(--progress-animation-time)) forwards;
}

.btn::before {
	content: "";
	display: none;
	position: absolute;
	background-color: #2B2D2F;
	inset: 0;
	border-radius: .125em;
	animation: squish var(--squish-animation-time) cubic-bezier(0.26, 0.6, 0.46, 1.7);
	animation-fill-mode: forwards;
}


.btn::after {
	content: "";
	display: none;
	position: absolute;
	background-color: #AAA;
	left: 51%;
	right: 51%;
	top: 45%;
	bottom: 45%;
	border-radius: .25em;
	animation: progress var(--progress-animation-time) var(--squish-animation-time);
	animation-fill-mode: forwards;
}

.btn.animating::before,
.btn.animating::after {
	display: block;
}

.btn.animating + .checkmark-container {
	background-color: #2B2D2F;
	border-radius: .25em;
	width: 0;
	height: 0;
	animation: circle var(--circle-animation-time) calc(var(--squish-animation-time) + var(--progress-animation-time)) forwards cubic-bezier(0.26, 0.6, 0.46, 1.7);
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn.animating + .checkmark-container .checkmark-svg {
	stroke: white;
	width: 25px;
	stroke-dashoffset: 40.84104919433594;
	stroke-dasharray: 40.84104919433594;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3px;
	animation: checkmark var(--circle-animation-time) calc(var(--squish-animation-time) + var(--progress-animation-time) + var(--circle-animation-time)) forwards;
}

@keyframes squish {
	100% {
		left: -25%;
		right: -25%;
		top: 45%;
		bottom: 45%;
		border-radius: .25em;
	}
}

@keyframes progress {
	100% {
		left: -25%;
		right: -25%;
	}
}

@keyframes hide {
	100% {
		width: 0;
		height: 0;
	}
}

@keyframes circle {
	0% {
		width: calc(var(--btn-width) * 1.50);
		height: calc(var(--btn-height) * .1);
	}
	100% {
		background-color: #71DFBE;
		width: 50px;
		height: 50px;
		border-radius: 100%;
	}
}

@keyframes checkmark {
	100% {
		stroke-dashoffset: 0;
	}
}