ul.social-nav.model-0
  li
    a.twitter(href='https://twitter.com/vineethtrv')
      i.fa.fa-twitter
  li
    a.facebook(href='https://www.facebook.com/vini.thekingal')
      i.fa.fa-facebook
  li
    a.google-plus(href='https://plus.google.com/u/0/109987289949504261649/posts')
      i.fa.fa-google-plus
  li
    a.linkedin
      i.fa.fa-linkedin
  li
    a.pinterest
      i.fa.fa-pinterest-p
br
ul.social-nav.model-1
  li
    a.twitter(href='https://twitter.com/vineethtrv')
      i.fa.fa-twitter
  li
    a.facebook(href='https://www.facebook.com/vini.thekingal')
      i.fa.fa-facebook
  li
    a.google-plus(href='https://plus.google.com/u/0/109987289949504261649/posts')
      i.fa.fa-google-plus
  li
    a.linkedin
      i.fa.fa-linkedin
  li
    a.pinterest
      i.fa.fa-pinterest-p
br
ul.social-nav.model-2
  li
    a.twitter(href='https://twitter.com/vineethtrv')
      i.fa.fa-twitter
  li
    a.facebook(href='https://www.facebook.com/vini.thekingal')
      i.fa.fa-facebook
  li
    a.google-plus(href='https://plus.google.com/u/0/109987289949504261649/posts')
      i.fa.fa-google-plus
  li
    a.linkedin
      i.fa.fa-linkedin
  li
    a.pinterest
      i.fa.fa-pinterest-p
br
ul.social-nav.model-3
  li
    a.twitter(href='https://twitter.com/vineethtrv')
      i.fa.fa-twitter
  li
    a.facebook(href='https://www.facebook.com/vini.thekingal')
      i.fa.fa-facebook
  li
    a.google-plus(href='https://plus.google.com/u/0/109987289949504261649/posts')
      i.fa.fa-google-plus
  li
    a.linkedin
      i.fa.fa-linkedin
  li
    a.pinterest
      i.fa.fa-pinterest-p
br
ul.social-nav.model-4
  li
    a.twitter(href='https://twitter.com/vineethtrv')
      i.fa.fa-twitter
  li
    a.facebook(href='https://www.facebook.com/vini.thekingal')
      i.fa.fa-facebook
  li
    a.google-plus(href='https://plus.google.com/u/0/109987289949504261649/posts')
      i.fa.fa-google-plus
  li
    a.linkedin
      i.fa.fa-linkedin
  li
    a.pinterest
      i.fa.fa-pinterest-p
br
ul.social-nav.model-5
  li
    a.twitter(href='https://twitter.com/vineethtrv')
      i.fa.fa-twitter
  li
    a.facebook(href='https://www.facebook.com/vini.thekingal')
      i.fa.fa-facebook
  li
    a.google-plus(href='https://plus.google.com/u/0/109987289949504261649/posts')
      i.fa.fa-google-plus
  li
    a.linkedin
      i.fa.fa-linkedin
  li
    a.pinterest
      i.fa.fa-pinterest-p
br
ul.social-nav.model-6
  li
    a.twitter(href='https://twitter.com/vineethtrv')
      i.fa.fa-twitter
  li
    a.facebook(href='https://www.facebook.com/vini.thekingal')
      i.fa.fa-facebook
  li
    a.google-plus(href='https://plus.google.com/u/0/109987289949504261649/posts')
      i.fa.fa-google-plus
  li
    a.linkedin
      i.fa.fa-linkedin
  li
    a.pinterest
      i.fa.fa-pinterest-p
br
ul.social-nav.model-7
  li
    a.twitter(href='https://twitter.com/vineethtrv')
      i.fa.fa-twitter
  li
    a.facebook(href='https://www.facebook.com/vini.thekingal')
      i.fa.fa-facebook
  li
    a.google-plus(href='https://plus.google.com/u/0/109987289949504261649/posts')
      i.fa.fa-google-plus
  li
    a.linkedin
      i.fa.fa-linkedin
  li
    a.pinterest
      i.fa.fa-pinterest-p
br
ul.social-nav.model-8
  li
    a.twitter(href='https://twitter.com/vineethtrv')
      i.fa.fa-twitter
  li
    a.facebook(href='https://www.facebook.com/vini.thekingal')
      i.fa.fa-facebook
  li
    a.google-plus(href='https://plus.google.com/u/0/109987289949504261649/posts')
      i.fa.fa-google-plus
  li
    a.linkedin
      i.fa.fa-linkedin
  li
    a.pinterest
      i.fa.fa-pinterest-p
br
ul.social-nav.model-9
  li
    a.twitter(href='https://twitter.com/vineethtrv')
      i.fa.fa-twitter
  li
    a.facebook(href='https://www.facebook.com/vini.thekingal')
      i.fa.fa-facebook
  li
    a.google-plus(href='https://plus.google.com/u/0/109987289949504261649/posts')
      i.fa.fa-google-plus
  li
    a.linkedin
      i.fa.fa-linkedin
  li
    a.pinterest
      i.fa.fa-pinterest-p
br
ul.social-nav.model-3d-0
  li
    a.twitter(href='https://twitter.com/vineethtrv')
      .front
        i.fa.fa-twitter
      .back
        i.fa.fa-twitter
  li
    a.facebook(href='https://www.facebook.com/vini.thekingal')
      .fornt
        i.fa.fa-facebook
      .back
        i.fa.fa-facebook
  li
    a.google-plus(href='https://plus.google.com/u/0/109987289949504261649/posts')
      .front
        i.fa.fa-google-plus
      .back
        i.fa.fa-google-plus
  li
    a.linkedin
      .front
        i.fa.fa-linkedin
      .back
        i.fa.fa-linkedin
  li
    a.pinterest
      .front
        i.fa.fa-pinterest-p
      .back
        i.fa.fa-pinterest-p
br
ul.social-nav.model-3d-1
  li
    a.twitter(href='https://twitter.com/vineethtrv')
      .front
        i.fa.fa-twitter
      .back
        i.fa.fa-twitter
  li
    a.facebook(href='https://www.facebook.com/vini.thekingal')
      .fornt
        i.fa.fa-facebook
      .back
        i.fa.fa-facebook
  li
    a.google-plus(href='https://plus.google.com/u/0/109987289949504261649/posts')
      .front
        i.fa.fa-google-plus
      .back
        i.fa.fa-google-plus
  li
    a.linkedin
      .front
        i.fa.fa-linkedin
      .back
        i.fa.fa-linkedin
  li
    a.pinterest
      .front
        i.fa.fa-pinterest-p
      .back
        i.fa.fa-pinterest-p
br
View Compiled
@import "compass/css3";

*{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  font-family:arial;
}
body{
  background: #404040;;
  padding:0;
  margin:0;
  text-align: center;
  font-family: arial;
  color: #fff;
}
/*=====================*/
$fb-cl:#3B579D;
$twt-cl:#00ACED;
$gp-cl:#DD4A3A;
$in-cl:#007BB6;
$pin-cl:#CB2026;

@function shadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 30 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}


.social-nav{
  padding: 0;
  list-style: none;
  display: inline-block;
  margin:10px auto;
  li{
    display: inline-block;
  }
  a {
    display: inline-block;
    float: left;
    width: 48px;
    height: 48px;
    font-size: 20px;
    color: #FFF;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    line-height: 48px;
    background: #000;
    position: relative;
    @include transition(.5s);
  }
}


.model-0{
  position: absolute;
  @include transition(.5s);
  left:0;
  top: 50px;
  li{
    float: none;
    display: block;
  }
  a{
    &:hover{
    padding-left: 20px;
    width:65px;
    }
  }
  .twitter{ background:$twt-cl}
  .facebook{ background:$fb-cl}
  .google-plus{background:$gp-cl}
  .linkedin{background:$in-cl}
  .pinterest{ background:$pin-cl}
}
.model-1{
  li{margin:0 2px ;}
  a{
    background: #fff;
    @include transition(transform 1s, background .4s);
    @include border-radius(100%);
    &:hover{
      @include translateY(-10px);
    }
  }
   .twitter{ color:$twt-cl}
   .facebook{color:$fb-cl}
   .google-plus{color:$gp-cl;}
   .linkedin{color:$in-cl}
   .pinterest{color:$pin-cl}
}

.model-2{
  a{
    overflow: hidden;
    font-size: 26px;
    @include border-radius(4px);
    margin:0 5px;
    &:hover{
       background: #fff;
       @include text-shadow( shadow(darken(#eee, 10%)));
    }
  }
  
  .twitter{
    background:$twt-cl;
    @include text-shadow( shadow(darken($twt-cl, 10%)));
    &:hover{color:$twt-cl;}
  }
  .facebook{
    background:$fb-cl;
    @include text-shadow( shadow(darken($fb-cl, 10%)));
    &:hover{ color:$fb-cl}
  }
  .google-plus{
    background:$gp-cl;
    @include text-shadow( shadow(darken($gp-cl, 10%)));
    &:hover{ color:$gp-cl}
  }
  .linkedin{
    background:$in-cl;
    @include text-shadow( shadow(darken($in-cl, 10%)));
    &:hover{ color:$in-cl}
  }
  .pinterest{
    background:$pin-cl;
    @include text-shadow( shadow(darken($pin-cl, 10%)));
    &:hover{ color:$pin-cl}
  }
}
.model-3{
  margin-bottom: 50px;
  a{
    background: #fff;
    @include transition(padding .4s);
    margin: 0 5px;
    &:after{
      content: '';
      position: absolute ;
      border:24px solid #fff;
      z-index: -1;
      border-bottom-color:transparent !important;
      left: 0;
      top:60%;
      @include transition(transform .4s);
    }
    &:hover{
       color: #fff;
       padding-top: 10px;
       &:after{
         @include translateY(10px);
       }
    }
  }
  
  .twitter{
    color:$twt-cl;
    &:hover{ background:$twt-cl;
    &:after{border-color: $twt-cl}
    }
  }
  .facebook{
    color:$fb-cl;
    &:hover{ background:$fb-cl;
    &:after{border-color: $fb-cl}
    }
  }
  .google-plus{
    color:$gp-cl;
    &:hover{ background:$gp-cl;
    &:after{border-color: $gp-cl}
    }
  }
  .linkedin{
    color:$in-cl;
    &:hover{ background:$in-cl;
    &:after{border-color: $in-cl}
    }
  }
  .pinterest{
    color:$pin-cl;
    &:hover{ background:$pin-cl;
    &:after{border-color: $pin-cl}
    }
  }
}

.model-4{
  li{margin:0 2px ;}
  a{
    background:none;
    line-height: 1.5;
    font-size: 32px;
    @include text-shadow(0px 0px 1px );
    &:hover{
      @include text-shadow(0px 0px 25px );
    }
  }
   .twitter{ color:$twt-cl}
   .facebook{color:$fb-cl}
   .google-plus{color:$gp-cl;}
   .linkedin{color:$in-cl}
   .pinterest{color:$pin-cl}
}
.model-5{
  li{float: left;}
  a{background: #222;}
  .twitter:hover{ color:$twt-cl}
  .facebook:hover{color:$fb-cl}
  .google-plus:hover{color:$gp-cl}
  .linkedin:hover{color:$in-cl}
  .pinterest:hover{color:$pin-cl}
}

.model-6{
  li{float: left;}
  a{
    &:hover{background: #fff;}
  }
  .twitter{
    background:$twt-cl;
    &:hover{ color:$twt-cl}
  }
  .facebook{
    background:$fb-cl;
    &:hover{ color:$fb-cl}
  }
  .google-plus{
    background:$gp-cl;
    &:hover{color:$gp-cl}
  }
  .linkedin{
    background:$in-cl;
    &:hover{ color:$in-cl}
  }
  .pinterest{
    background:$pin-cl;
    &:hover{ color:$pin-cl}
  }
}
.model-7{
  li{margin:0 10px ;}
  a{
    background: none;
    @include box-shadow(0 0 4px 3px);
    @include text-shadow(0 0 1px #333);
    @include transition(transform .4s, background .4s);
    @include border-radius(100%);
    .fa{ @include transition(transform 1s)}
    &:hover{
      background: #fff;
      .fa{ @include transform( rotate(-10deg) scale(3))}
    }
  }
   .twitter{ color:$twt-cl}
   .facebook{color:$fb-cl}
   .google-plus{color:$gp-cl;}
   .linkedin{color:$in-cl}
   .pinterest{color:$pin-cl}
}

.model-8{
  a{
    background: #FFF;
    &:hover{
        @include box-shadow(0 48px  0  inset);
        &> .fa{color:#fff}
      }
  }
  .twitter{
    color:$twt-cl;
    &:hover{ color:$twt-cl}
  }
  .facebook{
    color:$fb-cl;
    &:hover{color:$fb-cl}
  }
  .google-plus{
    color:$gp-cl;
    &:hover{ color:$gp-cl}
  }
  .linkedin{
    color:$in-cl;
    &:hover{ color:$in-cl}
  }
  .pinterest{
    color:$pin-cl;
    &:hover{color:$pin-cl}
  }
}
.model-9{
  li{margin:0 10px ;}
  a{
    color: #fff;
    overflow: hidden;
    @include border-radius(100%);
    &:hover{
      background: #fff;
      .fa{ @include animation(.4s icon-move linear 0s)}
    }
  }
  .twitter{
    background:$twt-cl;
    &:hover{ color:$twt-cl}
  }
  .facebook{
    background:$fb-cl;
    &:hover{ color:$fb-cl}
  }
  .google-plus{
    background:$gp-cl;
    &:hover{color:$gp-cl}
  }
  .linkedin{
    background:$in-cl;
    &:hover{ color:$in-cl}
  }
  .pinterest{
    background:$pin-cl;
    &:hover{ color:$pin-cl}
  }
}

.model-3d-0{
  a {
    background: #333;
    float: left;
    margin:0 10px;
    @include transform-style(preserve-3d);
    &:hover { 
      @include rotateX(-90deg);
      .fornt{ @include backface-visibility (hidden);}
      .back{ @include backface-visibility (visible);}
    }  
  }
  .front , .back{
    width: 48px; 
    height: 48px;
    background: #333;
    position: absolute;
    top: 0;
    left: 0;
    @include translateZ(18px);
    @include backface-visibility (visible);
  }
  .back {
     font-size: 32px;
    @include transform(rotateX(90deg) translateZ(18px));
    @include backface-visibility (hidden);
  }
  .twitter .back { background: $twt-cl }
  .facebook  .back { background: $fb-cl }
  .google-plus .back { background: $gp-cl}
  .linkedin .back { background: $in-cl}
  .pinterest .back { background: $pin-cl}
}

.model-3d-1{
  a {
    background: #fff;
    color:#666;
    float: left;
    margin:0 10px;
    @include border-radius(100%);
    &:hover { 
      color: #fff;
      @include rotateY(-180deg);
      .fornt{ @include backface-visibility (hidden);}
      .back{ @include backface-visibility (visible);}
    }  
  }
  .front , .back{
    width: 48px; 
    height: 48px; 
    position: absolute;
    top: 0;
    left: 0;
    @include border-radius(100%);
    @include backface-visibility (visible);
  }
  .back {
    @include rotateY(-180deg);
    @include backface-visibility (hidden);
  }
  .twitter .back { background: $twt-cl }
  .facebook  .back { background: $fb-cl }
  .google-plus .back { background: $gp-cl}
  .linkedin .back { background: $in-cl}
  .pinterest .back { background: $pin-cl}
}

/*====== Model-9 Animation ========*/
@include keyframes(icon-move){
  49%{@include translateX(-40px); opacity:0}
  50%{@include translateX(40px);opacity:1}
  80%{@include translateX(0);}
}
$(window).scroll(function(){
 var navTop =  $(window).scrollTop();
 $('.model-0').css("top", navTop + 50);
});







External CSS

  1. //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

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