<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)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.