Switch by Mohsinech
#e8e8e8
1.toggle { 2 position: relative; 3 width: 70px; 4 height: 70px; 5 background-color: rgb(1, 103, 255); 6 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); 7 border-radius: 50%; 8 display: flex; 9 justify-content: center; 10 align-items: center; 11 cursor: pointer; 12 overflow: hidden; 13} 14 15.toggle span { 16 position: absolute; 17 height: 2px; 18 width: 40px; 19 background-color: rgb(255, 255, 255); 20 border-radius: 4px; 21 cursor: pointer; 22 transition: 0.5s; 23} 24 25.toggle span:nth-child(1) { 26 transform: translateY(-15px); 27 width: 25px; 28 left: 15px; 29} 30 31.toggle.toggle:hover span:nth-child(1) { 32 width: 40px; 33 transform: translateY(0px) rotate(45deg); 34 transition-delay: 0.125s; 35} 36 37.toggle span:nth-child(2) { 38 transform: translateY(15px); 39 width: 15px; 40 left: 15px; 41} 42 43.toggle.toggle:hover span:nth-child(2) { 44 width: 40px; 45 transform: translateY(0px) rotate(315deg); 46 transition-delay: 0.125s; 47} 48 49.toggle:hover span:nth-child(3) { 50 transform: translateX(60px); 51} 52
778 views
778 views
MIT License