body {
transform: perspective(500px) rotateY(calc(20deg*var(--_i,-1)));
text-shadow:
calc(var(--_i,-1)* 0.08em) -.01em 0 var(--c),
calc(var(--_i,-1)*-0.08em) .01em 2px #0004;
outline-offset: .1em;
transition: 0.3s;
}
button:hover,
button:focus-visible {
--_p: 0%;
--_i: 1;
}
button:active {
text-shadow: none;
color: var(--c);
box-shadow: inset 0 0 9e9q #0005;
transition: 0s;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
}
button {
font-family: system-ui, sans-serif;
font-weight:bold;
font-size: 4rem;
margin: 0;
cursor: pointer;
padding: .1em .3em;
}