Checkbox Hack for button with what could be a faux :selected

dabblet.css

.transparent { opacity:0; }
.absolute { position:absolute; }

/* Toggled State */
label {   
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
  background-color:#ededed;
  border-radius:6px;
  border:1px solid #dcdcdc;
  color:#777777;
  font-weight:bold;
  font-family:sans-serif;
  font-size:15px;
  text-align:center;
  padding:6px 24px;
  text-decoration:none;
  text-shadow:1px 1px 0px #ffffff;
  display:inline-block; 
  transition:padding 0.3s ease-in-out;
}

/* Toggled State */
input[type=checkbox]:checked ~ label {
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #ffffff) );
  padding:50px 120px;
}

dabblet.html

<div class="relative">	
	<input id="toggle-1" type="checkbox" class="transparent absolute">
	<label for="toggle-1">I'm a toggle</label>
</div>

settings.json

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