HTML CSS
(a quick guide)
<input class="tog" type="checkbox" id="demo"> <label class="tog" for="demo"></label>
label.tog { DIMENSIONS display: block; width: 50px; height: 30px;
COSMETICS border: 5px solid #cacaca; background: #cacaca; cursor: pointer; }
label.tog::before { DIMENSIONS content: ""; display: block; width: 50%; height: 100%;
COSMETICS background: #fff; }
HIDE CHECKBOX input.tog { display: none; }
CHANGE SWITCH POSITION input.tog:checked + label.tog::before { position: relative; left: 50%; }
CHANGE COLOR input.tog:checked + label.tog { border: 5px solid #2285f5; background: #2285f5; }