A Pen by Oliver Knoblich.

Animated-Radio-Inputs.markdown

Animated Radio Inputs

Just CSS here...

A Pen by Oliver Knoblich on CodePen.

License.

index.html

<h1>Animated Radio Inputs</h1>

<div class="radios">
  <input id="r1" name="radio1" type="radio" checked />
  <label for="r1">Option 1</label>
  <input id="r2" name="radio1" type="radio" />
  <label for="r2">Option 2</label>
  <input id="r3" name="radio1" type="radio" />
  <label for="r3">Option 3</label>
  <input id="r4" name="radio1" type="radio" />
  <label for="r4">Option 4</label>
  <input id="r5" name="radio1" type="radio" />
  <label for="r5">Option 5</label>
</div>

<div class="radios red">
  <input id="r6" name="radio2" type="radio" />
  <label for="r6">Option 1</label>
  <input id="r7" name="radio2" type="radio" checked />
  <label for="r7">Option 2</label>
  <input id="r8" name="radio2" type="radio" />
  <label for="r8">Option 3</label>
  <input id="r9" name="radio2" type="radio" />
  <label for="r9">Option 4</label>
  <input id="r10" name="radio2" type="radio" />
  <label for="r10">Option 5</label>
</div>

<div class="radios blue">
  <input id="r11" name="radio3" type="radio" />
  <label for="r11">Option 1</label>
  <input id="r12" name="radio3" type="radio" />
  <label for="r12">Option 2</label>
  <input id="r13" name="radio3" type="radio" checked />
  <label for="r13">Option 3</label>
  <input id="r14" name="radio3" type="radio" />
  <label for="r14">Option 4</label>
  <input id="r15" name="radio3" type="radio" />
  <label for="r15">Option 5</label>
</div>

style.scss

@import "compass";
@import url('http://fonts.googleapis.com/css?family=Lato:400,700');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:before, :after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  padding: 40px 0;
  font: 12/1 Lato, sans-serif;
  background: #ccc;
}

.radios {
  position: relative;
  width: 550px;
  margin: 0 auto 20px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 2px 2px rgba(0,0,0,.1);
  overflow: hidden;
}

.radios input {
  position: absolute;
  opacity: 0;
}

.radios input + label {
  display: block;
  float: left;
  position: relative;
  width: 110px;
  height: 40px;
  font: 700 13px/40px Lato, sans-serif;
  text-align: center;
  color: #999;
  background: #fff;
  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.1);
  cursor: pointer;
  transform: translateZ(0);
}

.radios label:last-child {
  box-shadow: 0 0 0;
}

.radios label:after {
  left: 50%;
  bottom: -6px;
  margin-left: -3px;
  border: solid transparent;
  border-width: 6px;
	border-bottom-color: #555;
  transform: translateY(0);
  transition: transform .2s linear;
}

.radios input:checked + label {
  color: #555;
  transition: color .2s linear;
}

.radios input:checked + label:after {
  transform: translateY(-6px);
  transition: transform .2s linear;
}

.radios.red label:after {
	border-bottom-color: #d00;
}

.radios.red input:checked + label {
  color: #d00;
}

.radios.blue label:after {
	border-bottom-color: #26a;
}

.radios.blue input:checked + label {
  color: #26a;
}

h1 {
  margin: 0 0 20px;
  font-size: 24px;
  text-align: center;
  color: #555;
}