<button>BUTTON</button>

button {
  --c: #fff; /* text color */
  background:linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p,100%)/300% no-repeat,
    #06CEFF; /* background color */
  color: #0000;
  border: none;
  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;
  background: #fff;
}
button {
  font-family: system-ui, sans-serif;
  font-weight:bold;
  font-size: 4rem;
  margin: 0;
  cursor: pointer;
  padding: .1em .3em;
}