@import "compass/css3";
// colors
$red: #dd0000;
$blue: #0000ff;
$green: #00cc00;
$orange: #ff6000;
// config
$element-size : 80px;
$color: $red;
$shine : lighten($color, 50%);
$border-width: 2px;
// Colors
.blue {
.circle { background: $blue; border-color: $blue; }
&:hover .circle { border-right-color: $blue; }
&:hover .icon { color: $blue; }
}
.green {
.circle { background: $green; border-color: $green; }
&:hover .circle { border-right-color: $green; }
&:hover .icon { color: $green; }
}
.orange {
.circle { background: $orange; border-color: $orange; }
&:hover .circle { border-right-color: $orange; }
&:hover .icon { color: $orange; }
}
// styles
body {
height: 100%;
width: 100%;
margin: 100px auto;
width: 100%;
padding-left: 25px;
text-align: center;
overflow: hidden;
}
figure {
cursor: pointer;
display: inline-block;
margin-right: 60px;
position: relative;
width: $element-size;
height: $element-size;
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: $element-size/1.7;
background: $color;
transition: background .5s linear;
border: $border-width solid $color;
backface-visibility:hidden;
}
figure:hover .circle {
border-color: transparent;
background: #fff;
animation: hoorai cubic-bezier(.18, .14, .29, 1) 1s;
animation-fill-mode: forwards;
border-right-color: $color;
}
.icon {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
font: {
family: 'fontello';
size: $element-size/2.5;
}
color: #fff;
text-align: center;
line-height: $element-size+($border-width*2);
margin-left: $border-width;
transition: color .5s linear;
}
figure:hover .icon {
color: $color;
}
// Animation
@keyframes hoorai
{
0% {
transform: rotate(-90deg);
opacity: 1.0;
}
50% {
opacity: 1.0;
}
100% {
transform: rotate(360deg);
opacity: 0.0;
}
}
View Compiled