Web development news and technology

Learn the easiest way to make a working pure case checkbox which is Microsoft inspired. Created with css library   pure css. The codepen project is  here <input type="checkbox" class="c"/> .c{ appearance: none; -moz-appearance: none; -webkit-appearance: none; width:60px; height:30px; background:#ddd; border-radius:30px; transition:background 0.09s ease-in-out; color:#fff; outline: none; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); } .c:checked { background:#3af; } .c::after { content:''; width:30px; height:30px; background:#fff; border-radius:50%; transform:scale(0.8); position:absolute; left:0; top:0; transition:left 0.09s ease-in-out; box-shadow:1px 1px #ccc; } .c:checked::after{ left:30px; }