HTML CSS

CUSTOM TOGGLE BUTTON

(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.

THE HTML & IDEA

01

HIDE DEFAULT CHECKBOX .tog input { display: none; }

BASIC DIMENSIONS .tog {   position: relative; display: inline-block;   width: 60px; height: 30px; }

THE CSS PART A

02

"OUTSIDE BOX" USING <I> .tog i {   position: absolute; top: 0; bottom: 0;      left: 0; right: 0;   background-color: grey; }

THE CSS PART B

03

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

THE CSS PART C

04