アニメーションで移動するスライダー式のradioボタン

Result

スライダー式に見せたradioボタンです。box-shadowを使う等、アイデアが素敵でした

css

.letter-slider {/*空洞に見える部分はborder-bottomとbox-shadowで作られています*/
  border-bottom: 4px solid #000;
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.15);
  padding-bottom: 0.25em;
  margin: 1em auto;
  position: relative;
font-size:0.9em;
  width: 40em;
}
.letter-slider::after{/*空洞部分の位置調整*/
  content: '';
  display: table; 
	width: 100%; 
	clear: both;
}
.letter-slider input[type="radio"] {/*CSS3なradioボタンの類と同様、ボタン自体は非表示にしておく*/
  display: none;
}
.letter-slider label {/*ラベル部分のスタイリング*/
  color: #bebebe;
  float: left;
  width: 16.6666666667%;
  text-align: center;
  cursor: pointer;
  transition: color .5s;
}
.letter-slider label:hover {
  text-decoration: underline;
}
.letter-slider input:checked + label {
  color: white;
}
.letter-slider label:last-of-type::after {/*青のツマミ的な部分。三角形を作っているのとtransitionでエフェクト設定*/
  display: block;
  width: 0;
  height: 0;
  content: "";
  border: 0.6em solid transparent;
  border-top-width: 0;
  border-bottom-color: #1CA2FF;
  position: absolute;
  bottom: -5px;
  left: 0;
  margin-left: -0.6em;
  transition: left 0.5s;
}
.letter-slider input:checked:nth-of-type(1) ~ label:last-of-type::after {/*ツマミの移動*/
  left: 8.333333333333332%;
}
.letter-slider input:checked:nth-of-type(2) ~ label:last-of-type::after {
  left: 25%;
}
.letter-slider input:checked:nth-of-type(3) ~ label:last-of-type::after {
  left: 41.66666666666667%;
}
.letter-slider input:checked:nth-of-type(4) ~ label:last-of-type::after {
  left: 58.333333333333336%;
}
.letter-slider input:checked:nth-of-type(5) ~ label:last-of-type::after {
  left: 75%;
}
.letter-slider input:checked:nth-of-type(6) ~ label:last-of-type::after {
  left: 91.66666666666666%;
}

html

<div class="letter-slider">
  <input id="letterA" type="radio" name="letter">
  <label for="letterA">良かった</label>
  <input id="letterB" type="radio" name="letter">
  <label for="letterB">そこそこ</label>
  <input id="letterC" type="radio" name="letter" checked>
  <label for="letterC">まあまあ</label>
  <input id="letterD" type="radio" name="letter">
  <label for="letterD">微妙</label>
  <input id="letterE" type="radio" name="letter">
  <label for="letterE">良くない</label>
  <input id="letterF" type="radio" name="letter">
  <label for="letterF">悪い</label>
</div>

via

Radio buttons as a slider