1button {
2  --c: #fff;
3 /* text color */
4  background: linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p,100%)/300% no-repeat,
5    #004dff;
6 /* background color */
7  color: #0000;
8  border: none;
9  transform: perspective(500px) rotateY(calc(20deg*var(--_i,-1)));
10  text-shadow: calc(var(--_i,-1)* 0.08em) -.01em 0   var(--c),
11    calc(var(--_i,-1)*-0.08em)  .01em 2px #0004;
12  outline-offset: .1em;
13  transition: 0.3s;
14}
15
16button:hover,
17button:focus-visible {
18  --_p: 0%;
19  --_i: 1;
20}
21
22button:active {
23  text-shadow: none;
24  color: var(--c);
25  box-shadow: inset 0 0 9e9q #0005;
26  transition: 0s;
27}
28
29button {
30  font-family: system-ui, sans-serif;
31  font-weight: bold;
32  font-size: 2rem;
33  margin: 0;
34  cursor: pointer;
35  padding: .1em .3em;
36}