Button by Adir-SL
#e8e8e8
1button { 2 --fontSize: 2rem; 3 --button: 356, 80%; 4 --buttonColor: hsl(var(--button), 70%); 5 --sideColor: hsl(var(--button), 40%); 6 --text: hsl(var(--button), 30%); 7 --bgColor: #e8e8e8; 8 position: relative; 9 font-size: 0; 10 font-family: sans-serif; 11 transition: all 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8); 12 border-radius: 999px; 13 padding: calc(var(--fontSize) / 2); 14 height: calc(var(--fontSize) * 2); 15 min-width: calc(var(--fontSize) * 2); 16 line-height: calc(var(--fontSize) * 0.75); 17 border: none; 18 outline: none; 19 background-color: var(--buttonColor); 20 transform: rotate(-25deg); 21 color: var(--text); 22 white-space: nowrap; 23 cursor: pointer; 24 -webkit-tap-highlight-color: transparent; 25 box-shadow: calc(var(--fontSize) / -25) calc(var(--fontSize) / 25) calc(var(--fontSize) / 25) #ffffffbb inset, calc(var(--fontSize) / -25) calc(var(--fontSize) / -50) calc(var(--fontSize) / 25) #ffffff88 inset, 26 0 0 calc(var(--fontSize) / 5) #0f004a77 inset, 0 0 0 calc(var(--fontSize) / 3.6) var(--buttonColor) inset, 27 0 0 calc(var(--fontSize) / 6.25) calc(var(--fontSize) / 3.125) #0f004a44 inset, calc(var(--fontSize) / -25) calc(var(--fontSize) / 12.5) 0 var(--sideColor), 28 calc(var(--fontSize) / -8.33) calc(var(--fontSize) / 12.5) calc(var(--fontSize) / 6.25) #0f004a44, calc(var(--fontSize) / -16.666) calc(var(--fontSize) / 12.5) calc(var(--fontSize) / 25) #0f004a66; 29} 30 31button:hover { 32 transform: rotate(0); 33 overflow: visible; 34 font-size: var(--fontSize); 35} 36 37button::before, 38button::after { 39 content: ": "; 40 font-family: serif; 41 font-weight: bold; 42 text-shadow: calc(var(--fontSize) / 25) 0 0 var(--sideColor), 0 0 calc(var(--fontSize) / 12.5) #0f004a55, 43 calc(var(--fontSize) / 50) 0 0 var(--sideColor), calc(var(--fontSize) / 50) calc(var(--fontSize) / -50) 0 var(--sideColor); 44 color: var(--bgColor); 45 font-size: var(--fontSize); 46}
598 views
598 views
MIT License