18 Checkbox CSS Style Examples

Stylish Checkbox CSS
Stylish Checkbox CSS

HTML checkbox is used to get a yes or no answer from a user in a HTML form. It is a form element. HTML checkbox is made by adding type=”checkbox” attribute to <input /> tag. Checkbox is a Boolean attribute of <input /> tag. The checkbox text can be added near the tag to indicate what the checkbox value is for.

There are many checkbox css styles are made by developers such as making checkbox bootstrap, checkbox html5, html checkbox JavaScript etc.

Stylish Checkbox CSS

Stylish Checkbox CSS

Here is a HTML code for checkbox in HTML that will make your checkboxes look more beautiful. It is quite easy to use. Every checkbox CSS code is separated with comments.

Here is a list of 18 HTML Checkbox CSS Style Examples:

HTML Code for Checkbox


<div id="wrapper">

<div class="row">

<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button r" id="btn-1">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"></div>


<div class="layer"></div>

        </div>

      </div>

    </div>


<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button r" id="btn-2">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"></div>


<div class="layer"></div>

        </div>

      </div>

    </div>


<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button r" id="btn-3">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"></div>


<div class="layer"></div>

        </div>

      </div>

    </div>

  </div>


<div class="row">

<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button r" id="btn-4">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"></div>


<div class="layer"></div>

        </div>

      </div>

    </div>


<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button r" id="btn-5">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"><span></span></div>


<div class="layer"></div>

        </div>

      </div>

    </div>


<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button r" id="btn-6">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"> </div>


<div class="layer"></div>

        </div>

      </div>

    </div>

  </div>


<div class="row">

<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button r" id="btn-7">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"> <span></span> </div>


<div class="layer"></div>

        </div>

      </div>

    </div>


<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button r" id="btn-8">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"> <span></span> </div>


<div class="layer"></div>

        </div>

      </div>

    </div>


<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button r" id="btn-9">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"> <span></span> </div>


<div class="layer"></div>

        </div>

      </div>

    </div>

  </div>


<div class="row">

<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button b2" id="btn-10">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"> <span>YES</span> </div>


<div class="layer"></div>

        </div>

      </div>

    </div>


<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button b2" id="btn-11">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"> <span></span> </div>


<div class="layer"></div>

        </div>

      </div>

    </div>


<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button b2" id="btn-12">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"> <span></span> </div>


<div class="layer"></div>

        </div>

      </div>

    </div>

  </div>


<div class="row">

<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button b2" id="btn-13">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"> <span></span> </div>


<div class="layer"></div>

        </div>

      </div>

    </div>


<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button b2" id="btn-14">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"> <span></span> </div>


<div class="layer"></div>

        </div>

      </div>

    </div>


<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button b2" id="btn-15">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"></div>


<div class="layer"></div>

        </div>

      </div>

    </div>

  </div>


<div class="row">

<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button b2" id="btn-16">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"></div>


<div class="layer"></div>

        </div>

      </div>

    </div>


<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button b2" id="btn-17">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"> <span></span> </div>


<div class="layer"></div>

        </div>

      </div>

    </div>


<div class="toggle-btn-cover">

<div class="btn-cover">

<div class="button b2" id="btn-18">
          <input type="checkbox" class="checkbox">
          
<div class="knobs"> <span></span> </div>


<div class="layer"></div>

        </div>

      </div>

    </div>

  </div>

</div>


CSS Code for Checkbox

body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	background-color: #f07238;
}
#wrapper {
	display: table;
	width: 600px;
	margin: 80px auto;
	counter-reset: button-counter;
}
.row {
	display: table-row;
}
.toggle-btn-cover {
	display: table-cell;
	position: relative;
	width: 200px;
	height: 140px;
	box-sizing: border-box;
}
.btn-cover {
	margin: 10px;
	background-color: #fff;
	box-shadow: 0px 0px 10px red;
	border: 1px solid red;
}
.btn-cover:before {
	counter-increment: button-counter;
	content: counter(button-counter);
	position: absolute;
	right: 0;
	top: 0;
	font-size: 12px;
	line-height: 1;
	padding: 5px;
}
.btn-cover, .knobs, .layer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.button {
	position: relative;
	top: 50%;
	width: 74px;
	height: 36px;
	margin: -20px auto 0 auto;
	overflow: hidden;
}
.button.r, .button.r .layer {
	border-radius: 100px;
}
.button.b2 {
	border-radius: 2px;
}
.checkbox {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 3;
}
.knobs {
	z-index: 2;
}
.layer {
	width: 100%;
	background-color: #8cef8c;
	transition: 0.3s ease all;
	z-index: 1;
}


/*============= Button 1 =================== */
#btn-1 .knobs:before {
	content: 'YES';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 20px;
	height: 10px;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	background-color: #1b6e0a;
	border-radius: 50%;
	transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#btn-1 .checkbox:checked + .knobs:before {
	content: 'NO';
	left: 42px;
	background-color: #f44336;
}
#btn-1 .checkbox:checked ~ .layer {
	background-color: #fcebeb;
}
#btn-1 .knobs, #btn-1 .knobs:before, #btn-1 .layer {
	transition: 0.3s ease all;
}


/*============= Button 2 =================== */
#btn-2 .knobs:before, #btn-2 .knobs:after {
	content: 'YES';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 20px;
	height: 10px;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	background-color: #1b6e0a;
	border-radius: 50%;
	transition: 0.3s ease all;
}
#btn-2 .knobs:before {
	content: 'YES';
}
#btn-2 .knobs:after {
	content: 'NO';
}
#btn-2 .knobs:after {
	right: -28px;
	left: auto;
	background-color: #F44336;
}
#btn-2 .checkbox:checked + .knobs:before {
	left: -28px;
}
#btn-2 .checkbox:checked + .knobs:after {
	right: 4px;
}
#btn-2 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
}


/*============= Button 3 =================== */
#btn-3 .knobs:before {
	content: 'YES';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 20px;
	height: 10px;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	background-color: #1b6e0a;
	border-radius: 50%;
	transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}
#btn-3 .checkbox:active + .knobs:before {
	width: 46px;
	border-radius: 100px;
}
#btn-3 .checkbox:checked:active + .knobs:before {
	margin-left: -26px;
}
#btn-3 .checkbox:checked + .knobs:before {
	content: 'NO';
	left: 42px;
	background-color: #F44336;
}
#btn-3 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
}


/*============= Button 4 =================== */
#btn-4 .knobs:before, #btn-4 .knobs:after {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 20px;
	height: 10px;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	background-color: #1b6e0a;
	border-radius: 50%;
	transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#btn-4 .knobs:before {
	content: 'YES';
}
#btn-4 .knobs:after {
	content: 'NO';
}
#btn-4 .knobs:after {
	top: -28px;
	right: 4px;
	left: auto;
	background-color: #F44336;
}
#btn-4 .checkbox:checked + .knobs:before {
	top: -28px;
}
#btn-4 .checkbox:checked + .knobs:after {
	top: 4px;
}
#btn-4 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
}


/*============= Button 5 =================== */
#btn-5 {
	perspective: 60px;
	overflow: visible;
}
#btn-5 .knobs:before, #btn-5 .knobs span {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 20px;
	height: 10px;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	border-radius: 50%;
	transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#btn-5 .knobs:before {
	background-color: #1b6e0a;
}
#btn-5 .knobs span:before {
	content: 'YES';
}
#btn-5 .knobs:before, #btn-5 .layer {
	transform: rotateY(0);
	transform-origin: center;
}
#btn-5 .checkbox:checked + .knobs:before, #btn-5 .checkbox:checked + .knobs span {
	left: 42px;
}
#btn-5 .checkbox:checked + .knobs:before {
	transform: rotateY(180deg);
	background-color: #f44336;
}
#btn-5 .checkbox:checked + .knobs span:before {
	content: 'NO';
	left: 42px;
}
#btn-5 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
	transform: rotateY(-180deg);
}
#btn-5 .knobs, #btn-5 .knobs:before, #btn-5 .layer {
	transition: 0.3s ease all;
}


/*============= Button 6 =================== */
#btn-6 {
	overflow: visible;
}
#btn-6 .knobs:before {
	content: 'YES';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 20px;
	height: 10px;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	background-color: #1b6e0a;
	border-radius: 50%;
}
#btn-6 .layer, #btn-6 .knobs, #btn-6 .knobs:before {
	transform: rotateZ(0);
	transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#btn-6 .checkbox:checked + .knobs {
	transform: rotateZ(-180deg);
}
#btn-6 .checkbox:checked + .knobs:before {
	content: 'NO';
	background-color: #f44336;
	transform: rotateZ(180deg);
}
#btn-6 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
	transform: rotateZ(180deg);
}


/*============= Button 7 =================== */
#btn-7 .knobs:before, #btn-7 .knobs:after, #btn-7 .knobs span {
	position: absolute;
	top: 4px;
	width: 20px;
	height: 10px;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	border-radius: 50%;
}
#btn-7 .knobs:before {
	content: 'YES';
	left: 4px;
	color: #fff;
	opacity: 1;
}
#btn-7 .knobs:after {
	content: 'N';
	left: 42px;
	color: #fff;
	width: 14px;
	text-align: left;
	padding: 9px 7px;
	background-color: #f44336;
	opacity: 0;
}
#btn-7 .knobs:before, #btn-7 .knobs:after {
	transition: 0.3s ease all;
	z-index: 2;
}
#btn-7 .knobs span {
	left: 4px;
	background-color: #1b6e0a;
	transition: 0.2s ease all;
	z-index: 1;
}
#btn-7 .checkbox:checked + .knobs:before {
	opacity: 0;
}
#btn-7 .checkbox:checked + .knobs:after {
	opacity: 1;
}
#btn-7 .checkbox:checked + .knobs span {
	top: 14px;
	left: 56px;
	width: 2px;
	height: 2px;
	padding: 3px;
	background-color: #fff;
	z-index: 3;
}
#btn-7 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
}


/*============= Button 8 =================== */
#btn-8 .knobs:before, #btn-8 .knobs:after, #btn-8 .knobs span {
	position: absolute;
	top: 4px;
	width: 20px;
	height: 10px;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	border-radius: 50%;
	transition: 0.3s ease all;
}
#btn-8 .knobs:before {
	content: 'YES';
	color: #fff;
	left: 4px;
}
#btn-8 .knobs:after {
	content: 'NO';
	left: 42px;
	color: #fff;
	background-color: #f44336;
	opacity: 0;
}
#btn-8 .knobs:before, #btn-8 .knobs:after {
	z-index: 2;
}
#btn-8 .knobs span {
	left: 4px;
	background-color: #1b6e0a;
	z-index: 1;
}
#btn-8 .checkbox:checked + .knobs:before {
	opacity: 0;
}
#btn-8 .checkbox:checked + .knobs:after {
	opacity: 1;
}
#btn-8 .checkbox:checked + .knobs span {
	background-color: #ffc2c2;
	transform: scale(4);
}


/*============= Button 9 =================== */
#btn-9 .knobs:before, #btn-9 .knobs:after, #btn-9 .knobs span {
	position: absolute;
	top: 4px;
	width: 20px;
	height: 10px;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	border-radius: 50%;
	transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#btn-9 .knobs:before {
	content: 'YES';
	left: 4px;
}
#btn-9 .knobs:after {
	content: 'NO';
	right: -24px;
}
#btn-9 .knobs:before, #btn-9 .knobs:after {
	color: #fff;
	z-index: 2;
}
#btn-9 .knobs span {
	left: 4px;
	background-color: #1b6e0a;
	z-index: 1;
}
#btn-9 .checkbox:checked + .knobs:before {
	left: -24px;
}
#btn-9 .checkbox:checked + .knobs:after {
	right: 4px;
}
#btn-9 .checkbox:checked + .knobs span {
	left: 42px;
	background-color: #F44336;
}
#btn-9 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
}


/*============= Button 10 =================== */
#btn-10 .knobs:before, #btn-10 .knobs:after, #btn-10 .knobs span {
	position: absolute;
	top: 4px;
	width: 20px;
	height: 10px;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	border-radius: 2px;
	transition: 0.3s ease all;
}
#btn-10 .knobs:before {
	content: '';
	left: 4px;
	background-color: #1b6e0a;
}
#btn-10 .knobs:after {
	content: 'NO';
	right: 4px;
	color: #4e4e4e;
}
#btn-10 .knobs span {
	display: inline-block;
	left: 4px;
	color: #fff;
	z-index: 1;
}
#btn-10 .checkbox:checked + .knobs span {
	color: #4e4e4e;
}
#btn-10 .checkbox:checked + .knobs:before {
	left: 42px;
	background-color: #F44336;
}
#btn-10 .checkbox:checked + .knobs:after {
	color: #fff;
}
#btn-10 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
}


/*============= Button 11 =================== */
#btn-11 {
	overflow: visible;
}
#btn-11 .knobs {
	perspective: 70px;
}
#btn-11 .knobs:before, #btn-11 .knobs:after, #btn-11 .knobs span {
	position: absolute;
	top: 4px;
	border-radius: 2px;
}
#btn-11 .knobs:before, #btn-11 .knobs:after {
	width: 20px;
	height: 10px;
	color: #4e4e4e;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
}
#btn-11 .knobs:before {
	content: 'YES';
	left: 4px;
}
#btn-11 .knobs:after {
	content: 'NO';
	right: 4px;
}
#btn-11 .knobs span {
	right: 4px;
	width: 33px;
	height: 28px;
	background-color: #1b6e0a;
	transform: rotateY(0);
	transform-origin: 0% 50%;
	transition: 0.6s ease all;
	z-index: 1;
}
#btn-11 .checkbox:checked + .knobs span {
	transform: rotateY(-180deg);
	background-color: #f44336;
}
#btn-11 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
}


/*============= Button 12 =================== */
#btn-12 .knobs:before, #btn-12 .knobs:after, #btn-12 .knobs span, #btn-12 .knobs span:before, #btn-12 .knobs span:after {
	position: absolute;
	top: 4px;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	border-radius: 2px;
	transition: 0.3s ease all;
}
#btn-12 .knobs:before {
	content: 'YES';
	left: 4px;
}
#btn-12 .knobs:after {
	content: 'NO';
	right: 4px;
}
#btn-12 .knobs:before, #btn-12 .knobs:after {
	width: 27px;
	height: 10px;
	color: #4e4e4e;
	padding: 9px 3px;
	z-index: 1;
}
#btn-12 .knobs span {
	display: inline-block;
	z-index: 2;
}
#btn-12 .knobs span, #btn-12 .knobs span:before, #btn-12 .knobs span:after {
	width: 20px;
	height: 10px;
	padding: 9px 4px;
}
#btn-12 .knobs span:before, #btn-12 .knobs span:after {
	content: '';
	top: 0;
}
#btn-12 .knobs span:before {
	left: -28px;
	background-color: #F44336;
}
#btn-12 .knobs span:after {
	right: -42px;
	background-color: #1b6e0a;
}
#btn-12 .checkbox:checked + .knobs span:before {
	left: 4px;
}
#btn-12 .checkbox:checked + .knobs span:after {
	right: -74px;
}
#btn-12 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
}


/*============= Button 13 =================== */
#btn-13 .knobs:before, #btn-13 .knobs:after, #btn-13 .knobs span {
	position: absolute;
	top: 4px;
	width: 20px;
	height: 10px;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	border-radius: 2px;
	transition: 0.3s ease all;
}
#btn-13 .knobs:before, #btn-13 .knobs:after {
	color: #4e4e4e;
	z-index: 1;
}
#btn-13 .knobs:before {
	content: 'YES';
	left: 4px;
}
#btn-13 .knobs:after {
	content: 'NO';
	right: 4px;
}
#btn-13 .knobs span {
	width: 25px;
	left: 37px;
	background-color: #1b6e0a;
	z-index: 2;
}
#btn-13 .checkbox:checked + .knobs span {
	left: 4px;
	background-color: #F44336;
}
#btn-13 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
}


/*============= Button 14 =================== */
#btn-14 .knobs:before, #btn-14 .knobs:after, #btn-14 .knobs span:before, #btn-14 .knobs span:after {
	position: absolute;
	top: 4px;
	width: 20px;
	height: 10px;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	border-radius: 2px;
	transition: 0.3s ease all;
}
#btn-14 .knobs:before, #btn-14 .knobs:after {
	color: #4e4e4e;
	z-index: 1;
}
#btn-14 .knobs:before {
	content: 'YES';
	left: 4px;
}
#btn-14 .knobs:after {
	content: 'NO';
	right: 4px;
}
#btn-14 .knobs span {
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}
#btn-14 .knobs span:before {
	left: 4px;
	top: -28px;
	background-color: #F44336;
}
#btn-14 .knobs span:after {
	top: 4px;
	left: 39px;
	background-color: #1b6e0a;
}
#btn-14 .knobs span:before, #btn-14 .knobs span:after {
	content: '';
	width: 23px;
	z-index: 2;
}
#btn-14 .checkbox:checked + .knobs span:before {
	top: 4px;
}
#btn-14 .checkbox:checked + .knobs span:after {
	top: -28px;
}
#btn-14 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
}


/*============= Button 15 =================== */
#btn-15 .knobs:before, #btn-15 .knobs:after {
	position: absolute;
	top: 4px;
	width: 20px;
	height: 10px;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	opacity: 1;
	border-radius: 2px;
	transform: scale(1);
	transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#btn-15 .knobs:before {
	content: 'YES';
	left: 4px;
	background-color: #1b6e0a;
}
#btn-15 .knobs:after {
	content: 'NO';
	right: 4px;
	opacity: 0;
	transform: scale(4);
	background-color: #F44336;
}
#btn-15 .checkbox:checked + .knobs:before {
	opacity: 0;
	transform: scale(4);
}
#btn-15 .checkbox:checked + .knobs:after {
	opacity: 1;
	transform: scale(1);
}
#btn-15 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
}


/*============= Button 16 =================== */
#btn-16 .knobs:before {
	content: 'YES';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 20px;
	height: 10px;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	background-color: #1b6e0a;
	border-radius: 2px;
	transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}
#btn-16 .checkbox:active + .knobs:before {
	width: 46px;
}
#btn-16 .checkbox:checked:active + .knobs:before {
	margin-left: -26px;
}
#btn-16 .checkbox:checked + .knobs:before {
	content: 'NO';
	left: 42px;
	background-color: #F44336;
}
#btn-16 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
}


/*============= Button 17 =================== */
#btn-17 .knobs:before, #btn-17 .knobs span {
	content: 'YES';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 20px;
	height: 10px;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
}
#btn-17 .knobs:before {
	transition: 0.3s ease all, left 0.5s cubic-bezier(0.18, 0.89, 0.35, 1.15);
	z-index: 2;
}
#btn-17 .knobs span {
	background-color: #1b6e0a;
	border-radius: 2px;
	transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
	z-index: 1;
}
#btn-17 .checkbox:checked + .knobs:before {
	content: 'NO';
	left: 42px;
}
#btn-17 .checkbox:checked + .knobs span {
	left: 42px;
	background-color: #F44336;
}
#btn-17 .checkbox:checked ~ .layer {
	background-color: #ffc2c2;
}

/*============= Button 18 =================== */
#btn-18 .knobs:before, #btn-18 .knobs span {
	content: 'YES';
	position: absolute;
	top: 4px;
	left: 4px;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	background-color: #1b6e0a;
	border-radius: 2px;
}
#btn-18 .knobs:before {
	top: 50%;
	left: 8px;
	width: 20px;
	height: 10px;
	margin-top: -5px;
	background-color: transparent;
	z-index: 2;
}
#btn-18 .knobs span {
	width: 20px;
	height: 10px;
	padding: 9px 4px;
	transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
	z-index: 1;
}
#btn-18 .checkbox:active + .knobs:before {
	left: 10px;
	width: 46px;
	height: 4px;
	color: transparent;
	margin-top: -2px;
	background-color: #0095d8;
	transition: 0.3s ease all;
	overflow: hidden;
}
#btn-18 .checkbox:active + .knobs span {
	width: 58px;
}
#btn-18 .checkbox:checked:active + .knobs:before {
	left: auto;
	right: 10px;
	background-color: #d80000;
}
#btn-18 .checkbox:checked:active + .knobs span {
	margin-left: -38px;
}
#btn-18 .checkbox:checked + .knobs:before {
	content: 'NO';
	left: 47px;
}
#btn-18 .checkbox:checked + .knobs span {
	left: 42px;
	background-color: #F44336;
}
#btn-18 .checkbox:checked ~ .layer {
	background-color: #fcebeb;
}

Comments