HTML CSS

CUSTOM TOGGLE BUTTON

(a quick guide)

<input class="tog" type="checkbox"             id="demo"> <label class="tog" for="demo"></label>

"REGULAR" CHECKBOX LABEL

01

label.tog {   DIMENSIONS   display: block; width: 50px; height: 30px;

TOGGLE BUTTON CONTAINER

02

  COSMETICS   border: 5px solid #cacaca;   background: #cacaca;   cursor: pointer; }

label.tog::before {   DIMENSIONS   content: "";   display: block; width: 50%; height: 100%;

INNER TOGGLE SWITCH

03

  COSMETICS   background: #fff; }

HIDE CHECKBOX input.tog { display: none; }

TOGGLE MECHANISM

04

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; }