#212121
1.button { 2 width: 200px; 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: rgb(66, 66, 66); 10 border-radius: 10px; 11 color: white; 12 border: none; 13 position: relative; 14 cursor: pointer; 15 transition-duration: .2s; 16} 17 18.bell { 19 width: 13px; 20} 21 22.bell path { 23 fill: rgb(0, 206, 62); 24} 25 26.arrow { 27 position: absolute; 28 right: 0; 29 width: 30px; 30 height: 100%; 31 font-size: 18px; 32 display: flex; 33 align-items: center; 34 justify-content: center; 35} 36 37.button:hover { 38 background-color: rgb(77, 77, 77); 39 transition-duration: .2s; 40} 41 42.button:hover .arrow { 43 animation: slide-right .6s ease-out both; 44} 45/* arrow animation */ 46@keyframes slide-right { 47 0% { 48 transform: translateX(-10px); 49 opacity: 0; 50 } 51 52 100% { 53 transform: translateX(0); 54 opacity: 1; 55 } 56} 57 58.button:active { 59 transform: translate(1px , 1px); 60 transition-duration: .2s; 61} 62
8.5K views
8.5K views
Comments
MIT License