#212121
1input[type = "checkbox"] { 2 -webkit-appearance: none; 3 display: none; 4 visibility: hidden; 5} 6 7.bar { 8 display: block; 9 position: relative; 10 cursor: pointer; 11 width: 50px; 12 height: 40px; 13} 14 15.bar span { 16 position: absolute; 17 width: 45px; 18 height: 7px; 19 background: #f1faee; 20 border-radius: 100px; 21 display: inline-block; 22 transition: 0.3s ease; 23 left: 0; 24} 25 26.bar span.top { 27 top: 0; 28} 29 30.bar span.middle { 31 top: 17px; 32} 33 34.bar span.bottom { 35 bottom: 0; 36} 37 38input[type]:checked ~ span.top { 39 transform: rotate(45deg); 40 transform-origin: top left; 41 width: 48px; 42 left: 5px; 43} 44 45input[type]:checked ~ span.bottom { 46 transform: rotate(-45deg); 47 transform-origin: top left; 48 width: 48px; 49 bottom: -1px; 50 box-shadow: 0 0 10px #495057; 51} 52 53input[type]:checked ~ span.middle { 54 transform: translateX(-20px); 55 opacity: 0; 56}
12K views
12K views
Comments
MIT License