%figure.red
  .icon i
  .circle

%figure.blue
  .icon j
  .circle

%figure.green
  .icon g
  .circle

%figure.orange
  .icon h
  .circle
View Compiled
@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
//
// Beware of the Panda
// pandagotfiles.com starting soon... :)
//
Run Pen

External CSS

  1. http://minustalent.com/fontello-31cf9c4d/css/fontello.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js