![](/build/_assets/logo-png-XGWSYHKJ.png)
Button by Bastiennnn
#e8e8e8
1.button { 2 cursor: pointer; 3 width: 200px; 4 height: 60px; 5 background-color: white; 6 font-size: medium; 7 font-weight: bold; 8 box-shadow: 0 5px 10px rgb(122, 122, 122); 9 border-radius: 10px; 10 border: 2px solid gray; 11 transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); 12 position: relative; 13 display: flex; 14 align-items: center; 15 justify-content: center; 16} 17 18.button:hover { 19 box-shadow: 0 5px 10px rgb(58, 58, 58); 20 transform: translateY(-10px); 21} 22 23.button:active { 24 transform: scale(0.95); 25 box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); 26} 27 28.svg { 29 padding-right: 8px; 30 fill: none; 31 height: 25px; 32 transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); 33} 34 35.button:hover .svg { 36 animation: flyAround 6s cubic-bezier(0.4, 0, 0.2, 1) infinite; 37} 38 39@keyframes flyAround { 40 0% { 41 transform: translate(0, 0) rotate(0deg) scale(1); 42 } 43 50% { 44 transform: translate(20px, -100px) rotate(-300deg) scale(1); 45 } 46 100% { 47 transform: translate(0, 0) rotate(0deg) scale(1); 48 } 49} 50
64 views
64 views
MIT License