Switch by omar-alghaish
#212121
1.switch { 2 position: relative; 3 cursor: pointer; 4 width: 40px; 5 height: 40px; 6 background: linear-gradient(45deg, 7 rgb(183, 0, 255) 20%, 8 rgb(255, 0, 170) 100%); 9 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.363); 10 border-radius: 5px; 11} 12 13.switch input { 14 opacity: 0; 15 width: 100%; 16 height: 100%; 17 z-index: 1; 18 cursor: pointer; 19 position: absolute; 20} 21 22.switch div { 23 width: 80%; 24 height: 80%; 25 margin: 10%; 26 position: absolute; 27} 28 29.switch span { 30 background: #fff; 31 width: 100%; 32 height: 2px; 33 border-radius: 5px; 34 display: block; 35 position: absolute; 36 top: 50%; 37 left: 50%; 38 transform: translate(-50%, -50%); 39 transition: transform 0.5s, width 0.5s; 40} 41 42.switch .line-1 { 43 width: 50%; 44 transform: translate(-100%, -10px); 45 transform-origin: 0 0; 46} 47 48.switch .line-3 { 49 width: 50%; 50 left: auto; 51 right: 0; 52 transform: translate(0, 10px); 53 transform-origin: 100% 0; 54} 55 56input:checked + div span.line-1 { 57 transform: translate(0, 0) rotate(-45deg); 58} 59 60input:checked + div span.line-3 { 61 transform: translate(-100%, 0) rotate(-45deg); 62} 63 64input:checked + div span.line-2 { 65 transform: translate(-50%, -50%) rotate(45deg); 66}
2.3K views
2.3K views
MIT License