Button by JaydipPrajapati1910
#e8e8e8
1.button { 2 width: 140px; 3 height: 40px; 4 display: flex; 5 align-items: center; 6 justify-content: flex-start; 7 gap: 10px; 8 padding: 0px 15px; 9 background-color: red; 10 border-radius: 10px; 11 border: none; 12 color: white; 13 position: relative; 14 cursor: pointer; 15 font-weight: 900; 16 transition-duration: .2s; 17} 18 19.game path { 20 color: white; 21} 22 23.button .arrow { 24 position: absolute; 25 right: 0; 26 padding: 0px 5px; 27 width: 30px; 28 height: 100%; 29 font-size: 18px; 30 display: flex; 31 align-items: center; 32 justify-content: center; 33} 34 35.button:hover, 36.button:focus { 37 background-color: black; 38 transition-duration: .2s; 39} 40 41.button:hover .arrow { 42 animation: slide-right .6s ease-out both; 43} 44/* arrow animation */ 45@keyframes slide-right { 46 0% { 47 transform: translateX(-10px); 48 opacity: 0; 49 } 50 51 100% { 52 transform: translateX(0); 53 opacity: 1; 54 } 55} 56 57.button:active { 58 transform: translate(1px , 1px); 59 transition-duration: .2s; 60}
784 views
784 views
MIT License