Switch [CSS]

dabblet.css

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

/* Switch */
input[type="checkbox"].switch {
	position:absolute;
	left:50%;
	top:50%;
	margin:-0.6em -1.6em; 

	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;
	margin-right:1.2em;
}

input[type="checkbox"].switch: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"].switch:checked {
	background-position: 1.6em 0;
	padding-left: 1.5em;
	padding-right: 0;
	border: 0.1em solid #355279;
}

dabblet.html

<input type="checkbox" class="switch">

settings.json

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