input { display: none; } label { cursor: pointer; display: block; border: 1px solid #999; border-radius: 11px; background-color: #DDD; width: 40px; height: 20px; position: relative; transition: all 0.2s; } label:after { content: ''; background-color: #FFF; border: 1px solid #999; border-radius: 10px; width: 18px; height: 18px; position: absolute; top: 0; left: 0; transition: all 0.2s; } input:checked + label { background-color: #3eafe9; border-color: #3eafe9; } input:checked + label:after { left: 20px; border-color: #3eafe9; }
<input type="checkbox" id="switch" name="some-switch"> <label for="switch"></label>