#212121
1.button { 2 width: 120px; 3 height: 30px; 4 display: flex; 5 align-items: center; 6 justify-content: flex-start; 7 gap: 12px; 8 cursor: pointer; 9 border: 3px solid rgb(255, 239, 94); 10 background-color: rgb(255, 239, 94); 11 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137); 12} 13 14.text { 15 width: 70%; 16 height: 100%; 17 display: flex; 18 align-items: center; 19 justify-content: center; 20 background-color: rgb(27, 27, 27); 21 color: white; 22} 23 24.arrow path { 25 fill: rgb(19, 19, 19); 26} 27 28.button:hover .arrow { 29 animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; 30} 31 32@keyframes slide-in-left { 33 0% { 34 transform: translateX(-8px); 35 opacity: 0; 36 } 37 38 100% { 39 transform: translateX(0px); 40 opacity: 1; 41 } 42} 43 44.button:active { 45 transform: scale(0.97); 46}
2.5K views
2.5K views
Comments
MIT License