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