Button by vinodjangid07
#e8e8e8
1.setting-btn { 2 width: 45px; 3 height: 45px; 4 display: flex; 5 flex-direction: column; 6 align-items: center; 7 justify-content: center; 8 gap: 6px; 9 background-color: rgb(129, 110, 216); 10 border-radius: 10px; 11 cursor: pointer; 12 border: none; 13 box-shadow: 0px 0px 0px 2px rgb(212, 209, 255); 14} 15.bar { 16 width: 50%; 17 height: 2px; 18 background-color: rgb(229, 229, 229); 19 display: flex; 20 align-items: center; 21 justify-content: center; 22 position: relative; 23 border-radius: 2px; 24} 25.bar::before { 26 content: ""; 27 width: 2px; 28 height: 2px; 29 background-color: rgb(126, 117, 255); 30 position: absolute; 31 border-radius: 50%; 32 border: 2px solid white; 33 transition: all 0.3s; 34 box-shadow: 0px 0px 5px white; 35} 36.bar1::before { 37 transform: translateX(-4px); 38} 39.bar2::before { 40 transform: translateX(4px); 41} 42.setting-btn:hover .bar1::before { 43 transform: translateX(4px); 44} 45.setting-btn:hover .bar2::before { 46 transform: translateX(-4px); 47} 48
1.9K views
1.9K views
MIT License