Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Oliver Knoblich.
<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>
@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.