CSS Custom Checkbox | Toggle Switch | CSS Only No Javascript

Learn how to make Custom Checkbox Toggle Button using only CSS and HTML No Javascript.

In this tutorial you will learn how to make Custom Animated Checkbox toggle icon button in css.

[nonen]

Nice video, any other video on a toggle with icon?

[mr.haidarkhan]

I want to this button with ajax and php enable disable do you have?

[sjebsstuff]

The checkbox is still there!


body {

margin: 0;

padding: 0;

background: #f3f3f3;

}

.center {

position: absolute;

background: #c6c6c6;

outline: none;

border-radius: 20px;

box-shadow: inset 0 0 5px #BEBCBE;

transition: 0.5s;

}

input[type=checkbox] {

position: relative;

width: 40px;

height: 20px;

-webkit-appearance: none;

background: #c6c6c6;

outline: none;

border-radius: 20px;

box-shadow: inset 0 0 5px #BEBCBE;

transition: 0.5s;

}

input:checked[type=checkbox] {

background: #00C853;

}

input[type=checkbox]::before {

content: '';

position: absolute;

width: 20px;

height: 20px;

background: #fff;

border-radius: 20px;

top: 0;

left: 0;

box-shadow: 0 2px 5px #BEBCBE;

transition: 0.5s;

-webkit-appearance: none;

}

{

left:40px;

}