#e8e8e8
1button { 2 font-size: 18px; 3 display: inline-block; 4 outline: 0; 5 border: 0; 6 cursor: pointer; 7 will-change: box-shadow,transform; 8 background: radial-gradient( 100% 100% at 100% 0%, #89E5FF 0%, #5468FF 100% ); 9 box-shadow: 0px 0.01em 0.01em rgb(45 35 66 / 40%), 0px 0.3em 0.7em -0.01em rgb(45 35 66 / 30%), inset 0px -0.01em 0px rgb(58 65 111 / 50%); 10 padding: 0 2em; 11 border-radius: 0.3em; 12 color: #fff; 13 height: 2.6em; 14 text-shadow: 0 1px 0 rgb(0 0 0 / 40%); 15 transition: box-shadow 0.15s ease, transform 0.15s ease; 16} 17 18button:hover { 19 box-shadow: 0px 0.1em 0.2em rgb(45 35 66 / 40%), 0px 0.4em 0.7em -0.1em rgb(45 35 66 / 30%), inset 0px -0.1em 0px #3c4fe0; 20 transform: translateY(-0.1em); 21} 22 23button:active { 24 box-shadow: inset 0px 0.1em 0.6em #3c4fe0; 25 transform: translateY(0em); 26}
Comments
MIT License