2.7K views
CSSAdd prefixes
1input[type = "checkbox"] { 2 visibility: hidden; 3 display: none; 4 appearance: none; 5 -webkit-appearance: none; 6} 7 8label.container { 9 width: 60px; 10 height: 30px; 11 background: #d3d3d3; 12 border-radius: 50px; 13 position: relative; 14 cursor: pointer; 15 box-shadow: 9px 9px 29px #969696, 16 -9px -9px 29px #ffffff; 17} 18 19label.shadow { 20 width: 50px; 21 height: 20px; 22 position: absolute; 23 border-radius: 50px; 24 left: 5px; 25 top: 5px; 26 box-shadow: inset 3px 3px 10px #969696, 27 inset -3px -3px 5px #ffffffbd; 28 cursor: pointer; 29} 30 31.container span { 32 display: inline-block; 33 width: 20px; 34 height: 20px; 35 background-color: #ffaa00; 36 margin: 5px; 37 border-radius: 50px; 38 font-size: 20px; 39 transition: all 0.3s ease-in; 40 position: relative; 41 left: 0; 42 z-index: 1; 43} 44 45.container span::after { 46 position: absolute; 47 top: 6px; 48 left: 4px; 49 transition-delay: 5s; 50} 51 52input[type = "checkbox"]:checked ~ span { 53 left: 29px; 54 transition: 0.3s ease-in; 55 background: #0a100d; 56 transform: rotate(220deg); 57}
HTML
1<label class="container"> 2 3 <input type="checkbox" id="check"> 4 <span></span> 5 6 <label class="shadow" for="check"></label> 7</label>