Untitled

dabblet.css

* {-moz-box-sizing: border-box;    -webkit-box-sizing: border-box;    box-sizing: border-box;}
.a {color: #FBFBFB; font-family: sans-serif; width: 40px; display: inline-block;margin: 0;padding: 2px;height: 20px; vertical-align: top; margin: 0 -4px}
.b {position: relative;left: 20px;width: 100px;margin: 0 -100px 0 0;padding: 0; opacity: 0}
label {text-align: center;}
#toggle-1 {-webkit-transition: margin 0.2s ease-in-out}
#toggle-1:checked {  margin-left: -50%}
#switch {height: 20px;margin: 0;padding: 0; margin: 0; background: red;}
#switchHolder {background: gray;width: 80px;overflow: hidden;white-space: nowrap;position: relative;}

dabblet.html

<div id="switchHolder">
<input class="b" type="radio" id="toggle-1" name="on">
<label id="toggleLabel" class="a" for="toggle-1">On</label>
<div class="a" id="switch"></div>
<input class="b" type="radio" id="toggle-2" name="on">
<label class="a" for="toggle-2">Off</label>
</div>

settings.json

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