.push-button {
	--color: red;
	aspect-ratio: 1;
	height: 100%;
	max-width: 10rem;
	max-height: 10rem;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--color);
	position: relative;
	background: linear-gradient(
		color-mix(in oklab, var(--color) 100%, white 10%) 0%,
		color-mix(in oklab, var(--color), black) 30%,
		color-mix(in oklab, var(--color), black) 70%,
		color-mix(in oklab, var(--color) 100%, white 10%) 100%
	);
	background-repeat: no-repeat;
	box-shadow:
		inset 10px 10px 5px rgba(255, 255, 255, 0.3),
		inset -5px -5px 5px rgba(0, 0, 0, 0.3),
		0 10px hsl(from var(--color) h calc(s * 0.9) calc(l * 0.6));
	transition:
		box-shadow 0.3s ease,
		transform 0.3s ease;
}
.push-button:active {
	box-shadow:
		inset 5px 5px 5px rgba(0, 0, 0, 0.5),
		inset -2px -2px 8px rgba(255, 255, 255, 0.1),
		0 7px hsl(from var(--color) h calc(s * 0.9) calc(l * 0.6));
	transform: translateY(3px);
}
.push-button:before {
	content: "";
	inset: 0;
	opacity: 0.8;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(
		color-mix(in oklab, var(--color), #ffff00),
		var(--color) 40%,
		transparent 70%
	);
	background-size: 120% 120%;
	background-position: center;
	transition: opacity 0.3s ease;
}
.push-button:after {
	content: "";
	inset: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(
		transparent 30%,
		hsl(from var(--color) h s calc(l * 0.5) / 0.7) 70%
	);
	background-size: 5% 5%;
}
.push-button:active:before {
	opacity: 0.5;
}