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;

}