Simple CSS3 Toggle Switch Button

CSS Simple Toggle Switch Button: some time we use JavaScript to make custom checkbox, toggle switch button etc.. here I have made good tutorial of toggle switch button using HTML input Checkbox and css, we do not need to use JavaScript for switch button. It’s working with checkbox functionality.

Now enjoy the this tutorial and make your one good custom switch button using with input checkbox and css.

Demos

Try Your Self Download

Common Switch Demo

The HTML Common Markup

<label class="switch">
	<input class="switch-input" type="checkbox" />
	<span class="switch-label" data-on="On" data-off="Off"></span> 
	<span class="switch-handle"></span> 
</label>

The Common CSS

<style>
.switch {
	position: relative;
	display: block;
	vertical-align: top;
	width: 100px;
	height: 30px;
	padding: 3px;
	margin: 0 10px 10px 0;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
	border-radius: 18px;
	box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	box-sizing:content-box;
}
.switch-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	box-sizing:content-box;
}
.switch-label {
	position: relative;
	display: block;
	height: inherit;
	font-size: 10px;
	text-transform: uppercase;
	background: #eceeef;
	border-radius: inherit;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
	box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
	position: absolute;
	top: 50%;
	margin-top: -.5em;
	line-height: 1;
	-webkit-transition: inherit;
	-moz-transition: inherit;
	-o-transition: inherit;
	transition: inherit;
	box-sizing:content-box;
}
.switch-label:before {
	content: attr(data-off);
	right: 11px;
	color: #aaaaaa;
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
	content: attr(data-on);
	left: 11px;
	color: #FFFFFF;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
	opacity: 0;
}
.switch-input:checked ~ .switch-label {
	background: #E1B42B;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
	opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
	opacity: 1;
}
.switch-handle {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 28px;
	height: 28px;
	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
	border-radius: 100%;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -6px;
	width: 12px;
	height: 12px;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
	border-radius: 6px;
	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
	left: 74px;
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

/* Transition
========================== */
.switch-label, .switch-handle {
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
	-moz-transition: All 0.3s ease;
	-o-transition: All 0.3s ease;
}
</style>

Example 1 - Switch Left Right Demo

The HTML Markup

<label class="switch switch-left-right">
	<input class="switch-input" type="checkbox" />
	<span class="switch-label" data-on="On" data-off="Off"></span> 
	<span class="switch-handle"></span> 
</label>

The CSS

<style>
/* Switch Left Right
==========================*/
.switch-left-right .switch-label {
	overflow: hidden;
}
.switch-left-right .switch-label:before, .switch-left-right .switch-label:after {
	width: 20px;
	height: 20px;
	top: 4px;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 11px 0 0 0;
	text-indent: -12px;
	border-radius: 20px;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-left-right .switch-label:before {
	background: #eceeef;
	text-align: left;
	padding-left: 80px;
}
.switch-left-right .switch-label:after {
	text-align: left;
	text-indent: 9px;
	background: #FF7F50;
	left: -100px;
	opacity: 1;
	width: 100%;
}
.switch-left-right .switch-input:checked ~ .switch-label:before {
	opacity: 1;
	left: 100px;
}
.switch-left-right .switch-input:checked ~ .switch-label:after {
	left: 0;
}
.switch-left-right .switch-input:checked ~ .switch-label {
	background: inherit;
}
</style>

Example 2 - Switch Flat Demo

The HTML Markup

<label class="switch switch-flat">
	<input class="switch-input" type="checkbox" />
	<span class="switch-label" data-on="On" data-off="Off"></span> 
	<span class="switch-handle"></span> 
</label>

The CSS

<style>
/* Switch Flat
==========================*/
.switch-flat {
	padding: 0;
	background: #FFF;
	background-image: none;
}
.switch-flat .switch-label {
	background: #FFF;
	border: solid 2px #eceeef;
	box-shadow: none;
}
.switch-flat .switch-label:after {
	color: #0088cc;
}
.switch-flat .switch-handle {
	top: 6px;
	left: 6px;
	background: #dadada;
	width: 22px;
	height: 22px;
	box-shadow: none;
}
.switch-flat .switch-handle:before {
	background: #eceeef;
}
.switch-flat .switch-input:checked ~ .switch-label {
	background: #FFF;
	border-color: #0088cc;
}
.switch-flat .switch-input:checked ~ .switch-handle {
	left: 72px;
	background: #0088cc;
	box-shadow: none;
}
</style>

Example 3 -Switch Yes No Demo

The HTML Markup

<label class="switch switch-yes-no">
	<input class="switch-input" type="checkbox" />
	<span class="switch-label" data-on="Yes" data-off="No"></span> 
	<span class="switch-handle"></span> 
</label>

The CSS

<style>
/* Switch Yes No
==========================*/
.switch-yes-no {
	padding: 0;
	margin: 15px 0 0;
	background: #FFF;
	border-radius: 0;
	background-image: none;
}
.switch-yes-no .switch-label {
	box-shadow: none;
	background: none;
}
.switch-yes-no .switch-label:after, .switch-yes-no .switch-label:before {
	width: 100%;
	height: 70%;
	top: 5px;
	left: 0;
	text-align: center;
	padding-top: 10%;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-yes-no .switch-label:after {
	color: #FFFFFF;
	background: #32CD32;
	backface-visibility: hidden;
	transform: rotateY(180deg);
}
.switch-yes-no .switch-label:before {
	background: #eceeef;
	backface-visibility: hidden;
}
.switch-yes-no .switch-handle {
	display: none;
}
.switch-yes-no .switch-input:checked ~ .switch-label {
	background: #FFF;
	border-color: #0088cc;
}
.switch-yes-no .switch-input:checked ~ .switch-label:before {
	transform: rotateY(180deg)
}
.switch-yes-no .switch-input:checked ~ .switch-label:after {
	transform: rotateY(0)
}
</style>

Example 4 -Switch Slide Demo

The HTML Markup

<label class="switch switch-slide">
	<input class="switch-input" type="checkbox" />
	<span class="switch-label" data-on="Yes" data-off="No"></span> 
	<span class="switch-handle"></span>
</label>

The CSS

<style>
/* Switch Slide
==========================*/
.switch-slide {
	padding: 0;
	margin: 15px 0 0;
	background: #FFF;
	border-radius: 0;
	background-image: none;
}
.switch-slide .switch-label {
	box-shadow: none;
	background: none;
	overflow: hidden;
}
.switch-slide .switch-label:after, .switch-slide .switch-label:before {
	width: 100%;
	height: 65%;
	top: 5px;
	left: 0;
	text-align: center;
	padding-top: 10%;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-slide .switch-label:after {
	color: #FFFFFF;
	background: #87CEEB;
	left: -100px;
}
.switch-slide .switch-label:before {
	background: #eceeef;
}
.switch-slide .switch-handle {
	display: none;
}
.switch-slide .switch-input:checked ~ .switch-label {
	background: #FFF;
	border-color: #0088cc;
}
.switch-slide .switch-input:checked ~ .switch-label:before {
	left: 100px;
}
.switch-slide .switch-input:checked ~ .switch-label:after {
	left: 0;
}
</style>

Example 5 -Switch Light Demo

The HTML Markup

<label class="switch switch-light">
	<input class="switch-input" type="checkbox" />
	<span class="switch-label" data-on="On" data-off="Off"></span> 
	<span class="switch-handle"></span> 
</label>

The CSS

<style>
/* Switch Light
==========================*/
.switch-light {
	padding: 0;
	background: #FFF;
	background-image: none;
}
.switch-light .switch-label {
	background: #FFF;
	border: solid 2px #eceeef;
	box-shadow: none;
}
.switch-light .switch-label:after {
	color: #9370DB;
}
.switch-light .switch-label:before {
	right: inherit;
	left: 11px;
}
.switch-light .switch-handle {
	top: 6px;
	left: 72px;
	background: #dadada;
	width: 22px;
	height: 22px;
	box-shadow: none;
}
.switch-light .switch-handle:before {
	background: #eceeef;
}
.switch-light .switch-input:checked ~ .switch-label {
	background: #FFF;
	border-color: #9370DB;
}
.switch-light .switch-input:checked ~ .switch-handle {
	left: 72px;
	box-shadow: none;
	background: #9370DB
}
.switch-light .switch-input:checked ~ .switch-handle:before {
	background: rgba(255,255,255,0.7);
}
</style>

CSS3 Toggle Switch Button is a Good working in all most latest browser like Chrome, Safari, Firefox, IE 10.0+, Opera etc..

Try Your Self Download

Copyright 2016 by WebiBeris.com. All Rights Reserved.