Animated Share Bar

A lot of websites use social media to share their work with other users and bring in extra visitors to their site. In this tutorial, we will create a simple animated share bar using only CSS that you can add to your site. You will just need to change the links to direct the end user to your social media pages.


The above image is the share bar that your user will see, when they hover over the share bar, that is when the bar will animate to show the social media to click on, as in the image below.

Updated to now work with Internet Explorer.

Enough talk, lets get down to the code, firstly we will look at the HTML code used to display the bar.

<div class="share-container">
    <div class="flip-div">
        <div class="front">
            Share This Page
        </div>
        <div class="back">
            <a href="http://www.facebook.com"><img alt="facebook" src="facebook.png"></a>
            <a href="http://www.google.com"><img alt="google" src="google.png"></a>
            <a href="http://www.twitter.com"><img alt="twitter" src="twitter.png"></a>
            <a href="http://www.pinterest.com"><img alt="twitter" src="pinterest.png"></a>
        </div>
    </div>
</div>

We’ll break the code down a bit:
share-container – Is the container that will hold our share bar.
front – Any code displayed here will show when the user is not hovering over the bar.
back – This is what will be displayed when the user hovers over the bar.

Now onto the CSS code that will add our animation and all styles for the share bar.

.share-container {
   perspective: 1000;
   transform-style: preserve-3d;
}
.share-container, .front, .back {
   width: 200px;
   height: 60px;
}
.share-container:hover .back {
   transform: rotateY(0deg);
}
.share-container:hover .front {
   transform: rotateY(180deg);
}

.front, .back {
   border:2px solid #CCC;
   border-radius:10px;
   line-height:60px;
   text-align:center;
   background:#EEE;
   box-shadow:0 0 2px #aaa;
   backface-visibility: hidden;
   transition: 0.6s;
   transform-style: preserve-3d;
   position: absolute;
   top: 0;
   left: 0;
}
.flip-div {
   transition: 0.6s;
   transform-style: preserve-3d;
   position: relative;
}
.front {
   z-index: 2;
   color:#666;
   text-shadow:0 0 3px #fff;
   font-size:1.3em;
   font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
   transform: rotateY(0deg);
}
.back {
   transform: rotateY(-180deg);
}
.back img {
   vertical-align:middle;
}

The code used to animate the share bar is the transform and transform-style property. To view more information on these properties, please check out our transform property and transform-style property pages.

That’s all for this blog, feel free to use the code in your own websites and hopefully you’ll be able to get extra visitors and exposure to your website.

Demo

Download