Toggle button with checkboxes & radio

dabblet.css

input[type="radio"], input[type="checkbox"] {
	display: none;
}

input[type="radio"] + label, input[type="checkbox"] + label {
	color: #555;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 5px 9px;
	line-height: 22px;
	background-color: #ccc;
	background-image: linear-gradient(top, #f5f5f5, #d8d8d8);
}
input[type="radio"]:checked + label, 
input[type="checkbox"]:checked + label {
	color: #333;
	border: 1px solid #aaa;
	background-image: linear-gradient(top, #ccc, #ddd);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.2)
}

dabblet.html

<input type="checkbox" id="lulz" class="toggleButton" /><label for="lulz" class="toggleButton">Button</label>
<hr>
<input type="radio" id="radio1" name="radio" class="toggleButton" /><label for="radio1" class="toggleButton">Button 1</label>
<input type="radio" id="radio2" name="radio" class="toggleButton" /><label for="radio2" class="toggleButton">Button 2</label>

settings.json

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