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-top: 1px;    height: 20px;    vertical-align: top;    margin: 0 -4px;    text-shadow: 0 1px 0 black;    border-radius: 3px;}
.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;}
#toggleLabel {  background-color: #2d4266;  margin-right: -5px;  border-top-right-radius: 0;  border-bottom-right-radius: 0;}
#toggle-1:checked {    margin-left: -65%}
#switch {    height: 20px;    margin: 0;    padding: 0;    margin: 0;    border: 1px solid #d1d1d1;    background: lightgray;    background-color: #a7a7a7;    background-image: -webkit-gradient(linear, left top, left bottom, from(#a7a7a7), to(#FBFBFB)); /* Saf4+, Chrome */    background-image: -webkit-linear-gradient(top, #a7a7a7, #FBFBFB); /* Chrome 10+, Saf5.1+, iOS 5+ */    background-image:    -moz-linear-gradient(top, #a7a7a7, #FBFBFB); /* FF3.6 */    background-image:     -ms-linear-gradient(top, #a7a7a7, #FBFBFB); /* IE10 */    background-image:      -o-linear-gradient(top, #a7a7a7, #FBFBFB); /* Opera 11.10+ */    background-image:         linear-gradient(to bottom, #a7a7a7, #FBFBFB);}
#switchHolder {    border: 1px solid #d1d1d1;    border-radius: 3px;    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":"html"}