Editr Sample

radio.css

/** %[Object] Radio buttons */
/*------------------------------------*/
@-webkit-keyframes pulse {
    0% { width: .7em; height: .7em; margin: .4em;  }
    50% { width: 1.1em; height: 1.1em; margin: .2em; }
    100% { width: .9em; height: .9em; margin: .3em; }
}

@-moz-keyframes pulse {
    0% { width: .7em; height: .7em; margin: .4em;  }
    50% { width: 1.1em; height: 1.1em; margin: .2em; }
    100% { width: .9em; height: .9em; margin: .3em; }
}

@-o-keyframes pulse {
    0% { width: .7em; height: .7em; margin: .4em;  }
    50% { width: 1.1em; height: 1.1em; margin: .2em; }
    100% { width: .9em; height: .9em; margin: .3em; }
}

@keyframes pulse {
    0% { width: .7em; height: .7em; margin: .4em;  }
    50% { width: 1.1em; height: 1.1em; margin: .2em; }
    100% { width: .9em; height: .9em; margin: .3em; }
}

.radio {
    color: #798188;
    cursor: pointer;
    margin-left: .5em;
    display: inline-block;
}

.radio,
.radio span:before {
    -webkit-transition: .25s ease;
    -moz-transition: .25s ease;
    -ms-transition: .25s ease;
    -o-transition: .25s ease;
    transition: .25s ease;
}

.radio span {
    width: 1.5em;
    height: 1.5em;
    margin-right: .5em;
    border-radius: 3em;
    background: #202325;
    vertical-align: top;
    display: inline-block;
}

.radio span:before {
    content: '';
    width: .7em;
    height: .7em;
    margin: .4em;
    border-radius: 3em;
    display: inline-block;
    background-color: rgba(0,0,0,0);
}

.radio:hover span:before {
    background-color: rgba(255,255,255, .9);
}

/*------------------------------------*/

input[type="radio"]:checked + .radio {
    color: #f8f8f8;
}

input[type="radio"]:checked + .radio span:before {
    background-color: #9fd86b;
    width: .9em;
    height: .9em;
    margin: .3em;
    -webkit-animation: pulse .25s;
    -moz-animation:    pulse .25s;
    -o-animation:      pulse .25s;
    animation:         pulse .25s;
}

radio.html

<label>Is this cool?</label>
<input type="radio" name="rate" id="r1" value="hell yeah" checked="" hidden="">
<label for="r1" class="radio"><span></span>hell yeah</label>
<input type="radio" name="rate" id="r2" value="a little" hidden="">
<label for="r2" class="radio"><span></span>a little</label>
<input type="radio" name="rate" id="r3" value="nope" hidden="">
<label for="r3" class="radio"><span></span>nope</label>

script.js

console.log('Hello');

style.less

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600");

html {
    background: #26292c;
    color: #f8f8f8;
    font: 1em/1.5 "Open Sans", Arial;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;

    body {
        margin: auto;
        width: 100%;
        height: 8.5em;
        text-align: center;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
    }
}

switch.css

/** %[Object] Switch */
/*------------------------------------*/
.switch {
    color: #6f839a;
	cursor: pointer;
	font-weight: 600;
	line-height: 1.5em;
	border-radius: 3px;
	padding: .125em .5em;
	display: inline-block;
	background-color: #3e4956;
	-webkit-transition: .15s ease;
	-moz-transition: .15s ease;
	-ms-transition: .15s ease;
	-o-transition: .15s ease;
	transition: .15s ease;
}

input[type="radio"]:checked + .switch {
	color: #fff;
	padding-left: 1em;
	padding-right: 1em;
}

input[type="radio"]:checked + .switch--on {
	background-color: #7eab55;
}

input[type="radio"]:checked + .switch--off {
	background-color: #dd4a38;
}

switch.html

<p>
    <input type="radio" name="s1" id="s1On" value="1" hidden="" checked="">
    <label for="s1On" class="switch switch--on">Yes</label>
    <input type="radio" name="s1" id="s1Off" value="0" hidden="">
    <label for="s1Off" class="switch switch--off">No</label>
</p>
<p>
    <input type="radio" name="s2" id="s2On" value="1" hidden="">
    <label for="s2On" class="switch switch--on">✓</label>
    <input type="radio" name="s2" id="s2Off" value="0" hidden="" checked="">
    <label for="s2Off" class="switch switch--off">✗</label>
</p>
<p>
    <input type="radio" name="s3" id="s3On" value="1" hidden="" checked="">
    <label for="s3On" class="switch switch--on">Sure</label>
    <input type="radio" name="s3" id="s3Off" value="0" hidden="">
    <label for="s3Off" class="switch switch--off">I dunno</label>
</p>