Semantic Single-State Toggle

dabblet.css

/**
   Semantic Single-State Toggle
*/

input[type=radio] { display:none }

label {
	float: left;
	padding: 10px;
	background: #f1f1f1;
}
label:hover {
	background: #ddd;
	cursor: pointer;
}
input:checked + label { background:#aaa }

dabblet.html

<input id="sv-day" type="radio" name="segmented-view"><label for="sv-day">Day</label>
<input id="sv-week" type="radio" name="segmented-view"><label for="sv-week">Week</label>
<input id="sv-year" type="radio" name="segmented-view"><label for="sv-year">Year</label>

dabblet.js

// alert('Hello world!');

settings.json

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