Button by RaspberryBee
#e8e8e8
1.button { 2 height: 2em; 3 width: 5em; 4 border-radius: 1em; 5 border: 0.1rem solid transparent; 6 background-color: rgb(64, 146, 239); 7 transition: 0.3s; 8 font-size: 1em; 9} 10 11.button:hover { 12 cursor: pointer; 13 transform: scale(1.05) rotate(3deg); 14} 15 16.button:active { 17 animation: borderMove 0.5s forwards; 18 transform: scale(0.9) rotate(-3deg); 19 background-color: rgb(0, 0, 0); 20 color: rgb(64, 146, 239); 21 border: 0.1rem solid rgb(38, 103, 224); 22} 23 24@keyframes borderMove { 25 0% { 26 border-width: 0.1rem; 27 transform: scale(1) rotate(0deg); 28 } 29 30 50% { 31 border-width: 0.4rem; 32 transform: scale(0.9) rotate(-3deg); 33 } 34 35 100% { 36 border-width: 0.15rem; 37 transform: scale(1) rotate(0deg); 38 } 39} 40
421 views
421 views
MIT License