Template for buttons

dabblet.css

/*
 * Template for buttons
 */
label {
	width: 458px;
	height: 28px;
}
label:hover img {
	top: -28px;
}
label:active img {
	top: -56px;
}
input:checked + label img {
	margin-top: -84px;
}


body {
background: #505050 url(http://f.cl.ly/items/271V2t1V1O0E0i0Y340z/Untitled-2.png) repeat-x;
margin: 11px 0 0 0;
}
/*button mask*/
input {
display: none;
}
label {
	display: block;
	overflow: hidden;
	position: relative;
}
label img {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-user-drag: none;
}

dabblet.html

<input type="checkbox" id="button"/>
<label for="button"><img src="http://dl.dropbox.com/u/519905/newbutton.png" /></label>

settings.json

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