Button by AqFox
#e8e8e8
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}
5.6K views
5.6K views
MIT License