<input id="li0" name="foo" type="radio" /><label for="li0"> </label> <input checked="" id="li1" name="foo" type="radio" /> <label for="li1"> </label> <input id="li2" name="foo" type="radio" /> <label for="li2"> </label> <input id="li3" name="foo" type="radio" /> <label for="li3"> </label> <input id="li4" name="foo" type="radio" /> <label for="li4"> </label> <input id="li5" name="foo" type="radio" /> <label for="li5"> </label>
<input id="li0" name="foo" type="radio" /><label for="li0"></label><input checked="" id="li1" name="foo" type="radio" /><label for="li1"></label><input id="li2" name="foo" type="radio" /><label for="li2"></label><input id="li3" name="foo" type="radio" /><label for="li3"></label><input id="li4" name="foo" type="radio" /><label for="li4"></label><input id="li5" name="foo" type="radio" /><label for="li5"></label>
html {
html {background: #ff6461;
}
body {position: absolute;
left: 50%;
top: 50%;
height: 214px;
width: 336px;
margin: -107px -168px;
}
input {visibility: hidden;
}
label {position: absolute;
left: 0;
right: 228px;
background: white;
cursor: pointer;
transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;
transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;
}
#li0 + label {
top: 14px;
bottom: 164px;
}
#li1 + label {
top: 64px;
bottom: 114px;
}
#li2 + label {
top: 114px;
bottom: 64px;
}
#li3 + label {
top: 164px;
bottom: 14px;
}
:checked + label {
left: 122px;
right: 0;
top: 14px !important;
bottom: 14px !important;
transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;
transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;
}