HTML CSS
(a quick guide)
<label class="tog"> <input type="checkbox" /> <i></i> </label>
* Use CSS to hide the default checkbox.
* Use the <i> to create toggle button.
HIDE DEFAULT CHECKBOX .tog input { display: none; }
BASIC DIMENSIONS .tog { position: relative; display: inline-block; width: 60px; height: 30px; }
"OUTSIDE BOX" USING <I> .tog i { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: grey; }
"INSIDE BUTTON" USING <I::BEFORE> .tog i::before { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; background: white; }
ON "CHECKED" - COLOR .tog input:checked + i { background: red; } ON "CHECKED" - BUTTON POSITION .tog input:checked + i::before { left: auto; right: 4px; }