381 views
1/* k k im joking */ 2.container { 3 display: flex; 4 flex-direction: column; 5 justify-content: center; 6 gap: 1em; 7 color: rgb(129, 129, 129); 8} 9 10.container p { 11 margin-left: 6px; 12} 13 14.button { 15 transition: 180ms ease-in-out; 16 position: relative; 17 display: flex; 18 flex-direction: row; 19 justify-content: center; 20 width: 240px; 21 height: 68px; 22 background: linear-gradient(#ffffff, #7a7a7a); 23 border-radius: 10px; 24 box-shadow: 10px 15px 30px #0000006b, inset -8px 0 8px rgba(196, 196, 196, 0.25), inset 0 -8px 8px rgba(134, 134, 134, 0.15); 25} 26 27.button::before { 28 transition: 180ms ease-in-out; 29 content: ''; 30 position: absolute; 31 top: 3px; 32 left: 3px; 33 bottom: 12px; 34 right: 8px; 35 background: linear-gradient(90deg, #c0c0c0, #ffffff); 36 box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.25), 37 10px 5px 10px rgba(0,0,0,0.15); 38 border-radius: 10px; 39 border-left: 1px solid #0004; 40 border-top: 1px solid #0004; 41 border-right: 1px solid #0004; 42 border-bottom: 1px solid #0004; 43} 44 45.button:active { 46 box-shadow: 16px 16px 30px rgba(0, 0, 0, 0.25), inset -8px 0 8px rgba(196, 196, 196, 0.25), inset 0 -8px 8px rgba(134, 134, 134, 0.15); 47} 48 49.button:active::before { 50 transition: 180ms ease-in-out; 51 top: 3px; 52 left: 1px; 53 bottom: 12px; 54 right: 6px; 55 filter: brightness(0.95); 56} 57 58#bump { 59 position: absolute; 60 bottom: 18px; 61 height: 4px; 62 width: 24px; 63 border-radius: 8px; 64 background: rgb(179, 179, 179); 65} 66 67.button li { 68 list-style: none; 69 position: absolute; 70 font-size: medium; 71 font-family: Arial, Helvetica, sans-serif; 72 font-style: italic; 73 margin-top: 8px; 74}
MIT License