Social Media Icons

by Juan Muñoz

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="backgro">
  <div class="social">
      <i class="fa fa-facebook"></i>
      <i class="fa fa-globe"></i>
      <i class="fa fa-instagram"></i>
  </div>  
</div>

CSS

div{margin-top: 15px;}
div.social i, div.social-rounded i, div.social-bar i{opacity: .65; font-size: 28px; padding: 0 5px; 
    -moz-transition: all .5s; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s;}
            div.social i:hover{text-shadow: grey 6px 4px 4px; cursor: pointer; opacity: 1;}
            div.social i.fa-facebook{color: #3B5998;}
            div.social i.fa-globe{color: #ff4500}
            div.social i.fa-instagram{color: #ff1286}

div.social-rounded i{border-radius: 50%; width: 35px; height: 44px; line-height: 44px; text-align: center; color: #fff; cursor: pointer;}
div.social-rounded i:hover{opacity: 1;
-webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);}
            div.social-rounded i.fa-facebook{background-color: #3B5998;}
            div.social-rounded i.fa-globe{background-color: #ff4500}
            div.social-rounded i.fa-instagram{background-color: #ff1286}

div.social-bar i{width: 36px; height: 40px; line-height: 40px; text-align: center; color: #fff; margin: -2px; z-index: 1; cursor: pointer;}
div.social-bar i:hover{opacity: 1; transform: scale(1.2); z-index: 999999 !important; margin-right: 2px;}
            div.social-bar i.fa-facebook{background-color: #3B5998;}
            div.social-bar i.fa-globe{background-color: #ff4500}
            div.social-bar i.fa-instagram{background-color: #ff1286}


div.social-left{position: absolute; left: 0; width: 46px; margin-top: 45px; transition: all .25s;}
div.social-left.hidden{left: -50px;}
div.social-left i{font-size: 32px; width: 46px; text-align: center; color: #fff; padding: 4px 2px; transition: padding .25s; cursor: pointer;}
div.social-left i:hover{padding-left: 14px;}
    div.social-left i.fa-facebook{background-color: #3B5998;}
    div.social-left i.fa-globe{background-color: #ff4500}
    div.social-left i.fa-instagram{background-color:...