Easy 3 state radio buttons for your website.

HTML & CSS Version

A simple to implement HTML & CSS 3 state radio button.

HTML

<div align=”center”>Three State Radio Button</div>
<div class=”wrapper”>
<label for=”yes_radio” id=”yes-lbl”>si</label><input type=”radio” value=”” name=”choice_radio” id=”yes_radio”>
<label for=”maybe_radio” id=”maybe-lbl”>?</label><input type=”radio” value=”” name=”choice_radio” id=”maybe_radio” checked=”checked”>
<label for=”no_radio” id=”no-lbl”>no</label><input type=”radio” value=”” name=”choice_radio” id=”no_radio”>

<div class=”toggle”></div>
</div>

CSS

@import “compass/css3”;

body {
background: #1d1d1d;
font-family: ‘Lato’, sans-serif;
font-size: 2rem;
color: white;
font-variant: small-caps;
}

/* height */
$h: 4rem;
/* width */
$w: $h * 3;
/* toggle dimensions */
$tw: $h * 1.2;
/* font size */
$fs: 2rem;
/* toggle’s border thickness */
$bt: 0.1rem;
/* toggle box shadow */
$bs: $bt * 2;
/* labels animation time */
$ta: 6s;
/* label text color */
$text-color: white;

/* colors: si, ?, no*/
$colors: #008000, #ff6c00, #ff0000;

@mixin borderColor($i) {
border: $bt solid nth($colors, $i);
background: lighten(nth($colors, $i), 10%);
box-shadow: 0 0 $bs $bs/2 nth($colors, $i) inset,
0 0 $bs $bs/2 nth($colors, $i);
}

@mixin animationDelay($time) {
-webkit-animation-delay: $time;
-o-animation-delay: $time;
-moz-animation-delay: $time;
animation-delay: $time;
}

@mixin animation($time) {
-webkit-animation: $time rot-label ease-in-out infinite;
-moz-animation: $time rot-label ease-in-out infinite;
-o-animation: $time rot-label ease-in-out infinite;
animation: $time rot-label ease-in-out infinite;
}

.wrapper {
width: $w;
height: $h;
position: relative;
margin: 2rem auto;
border-radius: $h/2;
background: gray;

& .toggle {
width: $tw;
height: $tw;
position: absolute;
left: $w / 3 – ($tw – $h) / 2;
top: -($tw – $h) / 2;
border-radius: 50%;
box-sizing: border-box;
@include borderColor(2);

transition:
all .3s cubic-bezier(
0.175, 0.885, 0.320, 1.275
);
}

& label {
cursor: pointer;
width: $h;
height: $h;
position: absolute;
margin: 0;
padding: 0;
z-index: 1;
display: inline-block;

text-align: center;
line-height: $h;
text-transform: uppercase;
font-family: ‘Lato’, sans-serif;
font-size: $fs;
font-weight: bold;
color: $text-color;
@include animation($ta);
}

& input {
position: absolute;
left: 0;
margin: 0;
padding: 0;
opacity: 0;
}
}

#yes_radio:checked {
background: red;

~ .toggle {
@include borderColor(1);
left: -($tw – $h) / 2;
}
}

#no_radio:checked {
background: red;

~ .toggle {
@include borderColor(3);
left: $w * 2 / 3 – ($tw – $h) / 2;
}
}

#maybe_radio, #maybe-lbl {
left: 100% * 1 / 3;
}

#no_radio, #no-lbl {
left: 100% * 2 / 3;
}

#maybe-lbl {
@include animationDelay($ta / 3);
}

#no-lbl {
@include animationDelay($ta * 2 / 3);
}

 

@mixin keyframess($name) {
@-webkit-keyframes $name { @content };
@-o-keyframes $name { @content };
@-moz-keyframes $name { @content };
@keyframes $name { @content };
}

@include keyframes(rot-label) {
0% { transform: rotate(0deg); }
15% { transform: rotate(-400deg); }
18% { transform: rotate(-340deg); }
20% { transform: rotate(-360deg); }
30% { transform: rotate(-360deg); }
100% { transform: rotate(-360deg); }
}