#e8e8e8
1button { 2 position: relative; 3 border: none; 4 background: transparent; 5 padding: 0; 6 cursor: pointer; 7 outline-offset: 4px; 8 transition: filter 250ms; 9 user-select: none; 10 touch-action: manipulation; 11} 12 13.shadow { 14 position: absolute; 15 top: 0; 16 left: 0; 17 width: 100%; 18 height: 100%; 19 border-radius: 12px; 20 background: hsl(0deg 0% 0% / 0.25); 21 will-change: transform; 22 transform: translateY(2px); 23 transition: transform 24 600ms 25 cubic-bezier(.3, .7, .4, 1); 26} 27 28.edge { 29 position: absolute; 30 top: 0; 31 left: 0; 32 width: 100%; 33 height: 100%; 34 border-radius: 12px; 35 background: linear-gradient( 36 to left, 37 hsl(340deg 100% 16%) 0%, 38 hsl(340deg 100% 32%) 8%, 39 hsl(340deg 100% 32%) 92%, 40 hsl(340deg 100% 16%) 100% 41 ); 42} 43 44.front { 45 display: block; 46 position: relative; 47 padding: 12px 27px; 48 border-radius: 12px; 49 font-size: 1.1rem; 50 color: white; 51 background: hsl(345deg 100% 47%); 52 will-change: transform; 53 transform: translateY(-4px); 54 transition: transform 55 600ms 56 cubic-bezier(.3, .7, .4, 1); 57} 58 59button:hover { 60 filter: brightness(110%); 61} 62 63button:hover .front { 64 transform: translateY(-6px); 65 transition: transform 66 250ms 67 cubic-bezier(.3, .7, .4, 1.5); 68} 69 70button:active .front { 71 transform: translateY(-2px); 72 transition: transform 34ms; 73} 74 75button:hover .shadow { 76 transform: translateY(4px); 77 transition: transform 78 250ms 79 cubic-bezier(.3, .7, .4, 1.5); 80} 81 82button:active .shadow { 83 transform: translateY(1px); 84 transition: transform 34ms; 85} 86 87button:focus:not(:focus-visible) { 88 outline: none; 89}
Comments
MIT License