Button by barisdogansutcu
#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: 0.2s; 16} 17.dot { 18 position: absolute; 19 left: 0; 20 top: 0; 21 transform: translate(-50%, -50%); 22 width: 15px; 23 height: 15px; 24 background-color: rgb(194, 3, 3); 25 border-radius: 100%; 26} 27.bell { 28 width: 13px; 29} 30 31.bell path { 32 fill: rgb(0, 206, 62); 33} 34 35.arrow { 36 position: absolute; 37 right: 0; 38 width: 30px; 39 height: 100%; 40 font-size: 18px; 41 display: flex; 42 align-items: center; 43 justify-content: center; 44} 45 46.button:hover { 47 background-color: rgb(77, 77, 77); 48 transition-duration: 0.2s; 49} 50 51.button:hover .arrow { 52 animation: slide-right 1s infinite; 53} 54/* arrow animation */ 55@keyframes slide-right { 56 0% { 57 transform: translateX(0); 58 } 59 60 50% { 61 transform: translateX(-5px); 62 } 63} 64 65.button:active { 66 transform: translate(1px, 1px); 67 transition-duration: 0.2s; 68} 69
307 views
Variation of abutton
MIT License