Button by vinodjangid07
#212121
1.Projects-Button { 2 width: fit-content; 3 height: 45px; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 padding: 5px 20px; 8 gap: 10px; 9 border: none; 10 border-radius: 10px; 11 cursor: pointer; 12 background: linear-gradient(120deg, rgb(150, 86, 199), rgb(98, 47, 138)); 13 transition: all 0.3s; 14 box-shadow: 0px 10px 10px rgba(144, 0, 255, 0.166); 15} 16.IconContainer { 17 display: flex; 18 align-items: center; 19 justify-content: center; 20 width: 25px; 21 height: 25px; 22 position: relative; 23} 24.svgBG { 25 width: 25px; 26 height: auto; 27} 28.svgFG { 29 width: 9px; 30 height: auto; 31 z-index: 2; 32 position: absolute; 33} 34.text { 35 color: rgb(240, 240, 240); 36 font-weight: 500; 37 font-size: 16px; 38} 39.Projects-Button:hover .svgFG { 40 animation: clockwise 2s linear infinite; 41} 42 43.Projects-Button:hover .svgBG { 44 animation: anti-clockwise 2s linear infinite; 45} 46@keyframes clockwise { 47 0% { 48 transform: rotate(0deg); 49 } 50 100% { 51 transform: rotate(360deg); 52 } 53} 54@keyframes anti-clockwise { 55 0% { 56 transform: rotate(0deg); 57 } 58 100% { 59 transform: rotate(-360deg); 60 } 61} 62.Projects-Button:hover { 63 background-color: rgb(119, 57, 166); 64} 65
387 views
387 views
MIT License