Another effect for social media sharing buttons is to put them in a cubic, which automatically gets opened when the mouse comes over it. The sense of 3D objects in two dimension page is always attractive and can gain more attentions and clicks!
HTML
<!-- This script got from www.devanswer.com -->
<div class="demo-container">
<div class="button"><i class="fa fa-share-alt"></i>
<div class="fb soc-but"><a class="back" title="On Facebook" href="https://www.facebook.com/plugins/like.php?href=http://devanswer.com"><i class="fa fa-facebook"></i></a></div>
<div class="tw soc-but"><a class="back" title="On Twitter" href="https://twitter.com/intent/tweet?text=DevAnswer&url=http://devanswer.com"><i class="fa fa-twitter"></i></a></div>
<div class="pi soc-but"><a class="back" title="Pin It" href="https://www.pinterest.com/pin/create/button/?url=http://devanswer.com"><i class="fa fa-pinterest"></i></a></div>
<div class="vk soc-but"><a class="back" title="On VK.com" href="https://vk.com/share.php?url=http://devanswer.com"><i class="fa fa-vk"></i></a></div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.demo-container {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: radial-gradient(farthest-corner at 50%, white, #67989A);
}
.button, .soc-but {
width: 7rem;
height: 7rem;
}
.button {
background: #042037;
position: relative;
-webkit-perspective: 300px;
perspective: 300px;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: white;
}
.button:hover .fb {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.button:hover .tw {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.button:hover .pi {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.button:hover .vk {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.soc-but {
position: absolute;
left: 0;
top: 0;
transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease;
transition: transform 0.4s ease, -webkit-transform 0.4s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.back {
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
color: white;
text-decoration: none;
}
.vk .back, .pi .back {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.tw .back, .fb .back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.fb .back {
background: #3b5998;
}
.vk .back {
background: #45668e;
}
.tw .back {
background: #00aced;
}
.pi .back {
background: #dd4b39;
}
.fb, .vk {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.pi, .tw {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.tw {
transition-delay: 0.1s;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.pi {
transition-delay: 0.2s;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.vk {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.fb {
transition-delay: 0.3s;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}