Toggle buttons

dabblet.css

/**
 * Toggle buttons
 */

input[type="checkbox"] {
	position: absolute;
	clip: rect(0,0,0,0);
}

input[type="checkbox"] + label {
	display: inline-block;
	padding: .35em .5em .2em;
	background: #ccc;
	background-image: linear-gradient(#ddd, #bbb);
	border: 1px solid rgba(0,0,0,.2);
	border-radius: .3em;
	box-shadow: 0 1px white inset;
	text-align: center;
	text-shadow: 0 1px 1px white;
	cursor: pointer;
}

input[type="checkbox"]:checked + label,
input[type="checkbox"]:active + label {
	box-shadow: .04em .1em .2em rgba(0,0,0,.6) inset;
	border-color: rgba(0,0,0,.3);
	background: #bbb;
}

body {	font: 150%/1.6 sans-serif; }

dabblet.html

<input type="checkbox" id="awesome" autofocus />
<label for="awesome">Awesome!</label>

<input type="checkbox" id="awesome2" checked />
<label for="awesome2">Awesome!</label>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}