<ul class="socialIcons">
  <li><a href="#" class="facebook"><i class="fa fa-facebook "></i></a></li>
  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
  <li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
  <li><a href="#" class="youtube"><i class="fa fa-youtube"></i></a></li>
</ul>


<a href="https://codepen.io/chandrashekhar/" target="_blank" class="otherPens">
 <i class="fa fa-codepen"></i> My Other Pens
</a>

@import url('https://fonts.googleapis.com/css?family=Raleway');
$dark:#F1DABF;
$facebook:#365899;
$twitter:#1DA1F2;
$youtube:#FF0000;
$instagram:#C32AA3;
$googlePlus:#DB4437;


@function Shadow($color,$number){
  $value:'0px 0px 0px #{$color}';
  @for $i from 1 through $number{
    $value:"#{$value},0px #{$i}px 2px "+darken($color,$i*5);
  }
  @return unquote($value);
}

body{
  background-color: $dark;
  font-family: 'Raleway', sans-serif;
}

.socialIcons{
  padding:0;
  margin:0;
  list-style-type:none;
  display:inline-block;
  position:fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  height:70px;
  text-align:center;
  li{
    display:inline-block;
    margin:auto 10px;
    
    a{
      text-align:center;
      display:inline-block;
      font-size:4rem;
      height:100px;
      width:100px;
      line-height:100px;
      color:$dark;
      transition:all ease 0.5s;
      text-shadow:
        0px 0px 1px rgba(0,0,0,1),
        0px 0px 1px rgba(0,0,0,1);
      transform:rotateX(-30deg);
      &:hover{
        transform:rotateX(-30deg) translateY(-20px) ;
        &.facebook{
          color:$facebook;
          text-shadow:Shadow($facebook,10);
        }
        &.twitter{
          color:$twitter;
          text-shadow:Shadow($twitter,10);
        }
        &.instagram{
          color:$instagram;
          text-shadow:Shadow($instagram,10);
        }
        &.googlePlus{
           color:$googlePlus;
          text-shadow:Shadow($googlePlus,10);
        }
        &.youtube{
          color:$youtube;
          text-shadow:Shadow($youtube,10);
        }
      }
    }
    
  }
}


.otherPens{
  position:absolute;
  color:#212121;
  font-weight:600;
  text-decoration:none;
  font-size:1.2rem;
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css

External JavaScript

This Pen doesn't use any external JavaScript resources.