<div class="radio-box">
<input class="radio-btn" type="radio" name="model1">
<label class="radio-label">Hello</label>
<input class="radio-btn" type="radio" name="model1" checked>
<label class="radio-label">World</label>
<input class="radio-btn" type="radio" name="model1">
<label class="radio-label">How</label>
<input class="radio-btn" type="radio" name="model1">
<label class="radio-label">Are</label>
<input class="radio-btn" type="radio" name="model1">
<label class="radio-label">You</label>
<span class="marker"></span>
</div>
@import "compass/css3";
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
font-family:arial;
}
body{background-color:#616161; font-family: arial; padding: 15px;}
/*======================*/
$top :50px;
$box-bg: #DFDFD1;
$prime-clr: #555;
$mark:#2FBFBF;
.radio-box{
position: relative;
width: 300px;
margin:25px auto;
@include border-radius(4px);
border:1px solid #ccc;
@include box-shadow(0 2px 5px rgba(0,0,0,0.4));
background-color:$box-bg;
}
.radio-label{
display:block;
color: $prime-clr;
font-size:24px;
line-height:1;
border-bottom: 1px solid rgba(255,255,255,0.4);
@include text-shadow(1px 1px 0 rgba(255,255,255,0.7));
@include box-shadow(0 1px 0 rgba(0,0,0,0.1));
cursor: pointer;
padding:15px 10px 15px 60px;
height: 50px;
&:last-of-type{
@include box-shadow(0 0 0);
border:none;
}
}
.radio-btn{
width: 100%;
position: relative;
height: 50px;
position: absolute;
top: $top;
opacity: 0;
z-index: 2;
cursor: pointer;
}
.marker{
position: absolute;
width: 30px;
height: 30px;
z-index: 2;
display: inline-block;
background-color: $mark;
top: $top;
left:-1px;
background-color: $mark;
@include background-image(linear-gradient(left, $mark/1.2 0%,$mark 100%));
@include border-radius(4px 0 0 4px);
@include transition(all .4s);
@include animation(markmove 2s);
&:after{
content: '';
position: absolute;
border:16px solid rgba(0,0,0,0);
border-left:15px solid $mark;
left: 100%;
top: 0;
}
}
@for $i from 1 through 5{
.radio-box .radio-btn:nth-of-type(#{$i}){
top :#{(-1+$i)*$top};
&:checked ~ .marker{
top :#{(-1+$i)*$top+10};
}
&:checked + .radio-label{
color:$mark;
background-color: rgba(255,255,255,0.2);
}
&:hover ~ .marker {
top :#{(-1+$i)*$top+10} !important;
}
}
}
@include keyframes(markmove){
0% { @include translateY(-60px);}
50% { @include translateY(150px);}
100%{ @include translateY(0);}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.