Switches [CSS]

dabblet.css

/**
 * Switches [CSS]
 */
 
html, body {
	min-height: 100%;
	overflow: hidden;
	height: 100%;
	}
	
html {
	background: linear-gradient(#ccc, #eee);
	overflow-y: scroll;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	}
	
body {
	outline: 0;
	vertical-align: baseline;
	margin:0;
	padding:0;
	position:relative;
	}

/********** Switch **********/
input[type="checkbox"].switch {
	position:relative;
	
	display:inline-block;
	
	margin:0 0 20px 0;
	
	background-image:
	linear-gradient(left, #ccc 50%, #4FA4E8 50%);

	background-size: 150% 100%;
	background-position: 15px 0;
	padding-right: 14px;
	width: 32px;
	height: 12px;  
	border: 1px solid #888;
	border-radius:10px;

	box-shadow:
	inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),
	0 1px 0 0 rgba(255, 255, 255, 0.75);
	cursor: pointer;
}

input[type="checkbox"].switch:after {
	content: '';
	display: block;
	height: 16px;
	width: 16px;
	right: -2px;
	top: -4px;
	z-index: 4;
	border: 1px solid #888;
	border-radius: 10px;
	background-color: #f7f7f7;
 	background-clip:content-box;
	background-image:
	linear-gradient(top, #f7f7f7, #eee);  

	box-shadow:
	inset 0 1px 2px rgba(255, 255, 255, 1.0),
	0 1px 1px rgba(0, 0, 0, 0.2);

	left:-1px;
	position:relative;
}

input[type="checkbox"].switch:checked {
	background-position:14px 0;

	padding-left: 14px;
	padding-right: 0;
	border: 1px solid #466185;
}

/* SQUARE AND DOT */
input[type="checkbox"].switch.dot:before,
input[type="checkbox"].switch.square.dot:before {
	content:'';
	display:block;
	height:8px;
	width:8px;
	border-radius:20px;
	top:50%;
	left:50%;
	margin:-4px -3px;
	position:relative;
	
	box-shadow:
	inset 0 0 2px 0 rgba(0,0,0,0.9),
	inset 0 1px 1px 0 rgba(0,0,0,0.4),
	0 1px 0 0 white;
	
	background:#888;
	z-index:5;
}

input[type="checkbox"].switch.square.dot:before {
	border-radius:2px;
}

input[type="checkbox"].switch.square:after {
	border-radius:4px;
}

input[type="checkbox"].switch.square {
	border-radius:2px;
}



/********** CHECKBOXES **********/
input[type="checkbox"] {
	cursor:pointer;
	height:18px;
	width:18px;
	-webkit-appearance:none;
	border: 1px solid #888;
	border-radius: 4px;
	background-color: #f7f7f7;
 	background-clip:content-box;
	background-image:
	linear-gradient(top, #f7f7f7, #eee);  

	box-shadow:
	inset 0 1px 2px rgba(255, 255, 255, 1.0),
	0 1px 1px rgba(0, 0, 0, 0.2);
}

input[type="checkbox"].tick:checked:after,
input[type="checkbox"].cross:checked:after {
	display: block;
	text-align:center;
	line-height:14px;
	z-index: 4;
	color:#777;
	font-family:"Arial Unicode MS","Microsoft Sans Serif","Free Sans","Gentium Plus","Gentium Basic","Gentium","GentiumAlt","DejaVu Sans","DejaVu Serif","Free Serif","TITUS Cyberbit Basic","Bitstream Cyberbit","Bitstream CyberBase","Doulos SIL","Code2000","Code2001";
	position:relative;
	text-shadow:0px 1px white;
	-webkit-font-smoothing:antialiased;
}

input[type="checkbox"].tick:checked:after {
	content: '\2713';
	font-weight:normal;
	font-size:12px;
}
	
input[type="checkbox"].cross:checked:after {
	content: '×';
	font-weight:normal;
	font-size:20px;
	line-height:16px;
}

/***** ANIMATION *****/
input[type="checkbox"],
input[type="checkbox"]:checked {
	transition:.2s;
}

/***** DEMO *****/
.wrapper {
	position:absolute;
	width:360px;
	height:260px;
	top:50%;
	left:50%;
	padding:20px;
	margin:-150px -200px;
	background:rgba(0,0,0,0.1);
}

.col {
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	
	width:50%;
    float:left;
    *margin-right:-1px;
}

dabblet.html

<div class="wrapper">

<div class="col"><!--Big Half Col-->

<div class="col">
<input type="checkbox" class="switch">
</div>

<div class="col">
<input type="checkbox" class="switch dot">
</div>


<div class="col">
<input type="checkbox" class="tick" checked>
</div>

<div class="col">
<input type="checkbox" class="cross" checked>
</div>


</div>


<div class="col"><!--Big Half Col-->

<div class="col">
<input type="checkbox" class="switch square">
</div>

<div class="col">
<input type="checkbox" class="switch square dot">
</div>

</div>

</div>

settings.json

{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}