<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" >
<ul> 
  <li>
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle-o fa-stack-2x"></i>
      <i class="fa fa-github fa-stack-1x"></i>
    </span>
  </li>
  <li>
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle-o fa-stack-2x"></i>
      <i class="fa fa-dribbble fa-stack-1x"></i>
    </span>
  </li>
  <li>
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle-o fa-stack-2x"></i>
      <i class="fa fa-google-plus fa-stack-1x"></i>
    </span>
  </li>
  <li>    
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle-o fa-stack-2x"></i>
      <i class="fa fa-facebook fa-stack-1x"></i>
    </span>
  </li>
  <li>
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle-o fa-stack-2x"></i>
      <i class="fa fa-twitter fa-stack-1x"></i>
    </span>
  </li>
  <li>
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle-o fa-stack-2x"></i>
      <i class="fa fa-share fa-stack-1x"></i>
    </span>
  </li>
</ul>

html { height:100%; background: linear-gradient(5deg, #556270, #C44D58); }
ul { padding:0; position:fixed; height:125px; width:0px; margin: 0 50% }
li { 
  color:white;
  width:40px; height:35px; 
  position:absolute; bottom:25px;
  list-style:none; text-align:center;
  transform-origin:150% top;  
  transition:all 0.5s linear;
}
li:nth-of-type(1) { transition:transform 0.5s linear; opacity:0 }
li:nth-of-type(2) { transition:transform 0.4s linear; opacity:0 }
li:nth-of-type(3) { transition:transform 0.3s linear; opacity:0 }
li:nth-of-type(4) { transition:transform 0.2s linear; opacity:0 }
li:nth-of-type(5) { transition:transform 0.1s linear; opacity:0 }
li:nth-of-type(6) { z-index:1; background:none; }

li span { transition:transform 0.2s linear; }

ul:hover { width:115px; }
ul:hover li:nth-of-type(1) { transform:rotate(300deg); opacity:1 }
ul:hover li:nth-of-type(2) { transform:rotate(240deg); opacity:1 }
ul:hover li:nth-of-type(3) { transform:rotate(180deg); opacity:1 }
ul:hover li:nth-of-type(4) { transform:rotate(120deg); opacity:1 }
ul:hover li:nth-of-type(5) { transform:rotate(60deg); opacity:1 }
ul:hover li:nth-of-type(1) span { transform:rotate(-300deg); }
ul:hover li:nth-of-type(2) span { transform:rotate(-240deg); }
ul:hover li:nth-of-type(3) span { transform:rotate(-180deg); }
ul:hover li:nth-of-type(4) span { transform:rotate(-120deg); }
ul:hover li:nth-of-type(5) span { transform:rotate(-60deg); }

*:not(body){ backface-visibility: hidden; } /* Fix white screens on animation */

i.fa.fa-stack-1x {font-size: 12px;}

// Social Sharing Concept (really quick and sloppy styled)