Switch [CSS]

dabblet.css

/**
 * Switch [CSS]
 */
html {
	background: linear-gradient(#ccc, #eee);
	min-height: 100%;
    font-size: 62.5%;
    font-size:10px;
}

/* Switch */
input[type="checkbox"] {
	position:relative;
	
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	
	margin:0 20px 20px 0;
	
	background-image:
	linear-gradient(left, #bbb 50%, #3E9BE6 50%);

	background-size: 150% 100%;
	background-position: 1.5em 0;
	cursor: pointer;
	padding-right: 1.6em;
	width: 3.2em;
	height: 1.2em;  
	border: 0.1em solid #7a7a7a;
	border-radius:1.0em;

	box-shadow:
	inset 0 0.1em 0.4em 0 rgba(0, 0, 0, 0.2),
	0 0.1em 0 0 rgba(255, 255, 255, 0.75);

	-webkit-appearance: none;
	transition: .2s;
}

input[type="checkbox"]:after {
	content: '';
	display: block;
	height: 1.6em;
	width: 1.6em;
	right: -0.2em;
	top: -0.36em;
	z-index: 4;
	border: 0.1em solid #858585;
	border-radius: 1.0em;
	background-color: #f7f7f7;
 
	background-image:
	linear-gradient(top, #f7f7f7, #eee);  

	box-shadow:
	inset 0 0.1em 0.2em rgba(255, 255, 255, 1),
	0 0.1em 0.1em rgba(0, 0, 0, 0.12);

	left:-0.1em;
	position:relative;
}

input[type="checkbox"]:checked {
	background-position: 1.6em 0;
	padding-left: 1.5em;
	padding-right: 0;
	border: 0.1em solid #355279;
}

input[type="checkbox"].dot:before {
	content:'';
	display:block;
	height:0.8em;
	width:0.8em;
	border-radius:10px;
	top:50%;
	left:50%;
	margin:-0.4em;
	position:relative;
	
	box-shadow:
	inset 0 0.1em 0.2em 0 rgba(0,0,0,0.8),
	0 0.1em 0 0 white;
	
	background:#888;
	z-index:5;
}


/* DEMO */
.wrapper {
	position:absolute;
	width:400px;
	height:300px;
	top:50%;
	left:50%;
	margin:-150px -200px;
}

.inner.wrapper {
	position:absolute;
	width:350px;
	height:250px;
	top:50%;
	left:50%;
	padding-top:100px;
	margin:-125px -175px;
}

dabblet.html

<div class="wrapper">
<div class="inner wrapper">
<input type="checkbox">
<input type="checkbox" class="dot">
</div>
</div>

settings.json

{"view":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}