Button by TimTrayler
#212121
1button { 2 --hover-shadows: 16px 16px 33px #121212, -16px -16px 33px #303030; 3 --accent: fuchsia; 4 font-weight: bold; 5 letter-spacing: 0.1em; 6 border: none; 7 border-radius: 1.1em; 8 background-color: #212121; 9 cursor: pointer; 10 color: white; 11 padding: 1em 2em; 12 transition: box-shadow ease-in-out 0.3s, background-color ease-in-out 0.1s, 13 letter-spacing ease-in-out 0.1s, transform ease-in-out 0.1s; 14 box-shadow: 13px 13px 10px #1c1c1c, -13px -13px 10px #262626; 15} 16 17button:hover { 18 box-shadow: var(--hover-shadows); 19} 20 21button:active { 22 box-shadow: var(--hover-shadows), var(--accent) 0px 0px 30px 5px; 23 background-color: var(--accent); 24 transform: scale(0.95); 25} 26
21K views
21K views
MIT License