Responsive Sliding Social Media Buttons with Pure CSS3

Fully responsive sliding social media buttons built on top of CSS3 transition & transform properties to promote your webpage, post or product. Font Awesome is required for the social media icons.

How to use it:

Include the necessary Font Awesome framework in the document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">

Include the  required slide-social-buttons.css in the head section of the page.

<link rel="stylesheet" href="css/slide-social-buttons.css">

Facebook Like Button:

<section class="social-buttons"> 
<!-- Facebook -->
<div class="slide-social">
<div class="button">
<iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fgoogle.com%2F&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
</div>
<div class="facebook icon"> <i class="fa fa-facebook"></i> </div>
<div class="facebook slide">
<p>like</p>
</div>
</div>
</div>

Twitter Tweet Button:

<section class="social-buttons"> 
<!-- Twitter -->
<div class="slide-social">
<div class="button"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://google.com" data-text="Google.com" data-via="cssscript">tweet</a> </div>
<div class="twitter icon"> <i class="fa fa-twitter"></i> </div>
<div class="twitter slide">
<p>tweet</p>
</div>
</div>
</div>
<!-- Twitter JS --> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Google +1 Button:

<section class="social-buttons"> 
<!-- Google+ -->
<div class="slide-social">
<div class="button">
<div class="g-plusone" data-size="medium"></div>
</div>
<div class="google-plus icon"> <i class="fa fa-google-plus"></i> </div>
<div class="google-plus slide">
<p>+1</p>
</div>
</div>
</section>
<!-- Google+ JS --> 
<script>
(function() {
 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Linkedin Button:

<section class="social-buttons"> 
<!-- Linkedin -->
<div class="slide-social">
<div class="button"> 
<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script> 
<script type="IN/Share" data-url="http://google.com/" data-counter="right"></script> 
</div>
<div class="linkedin icon"> <i class="fa fa-linkedin"></i> </div>
<div class="linkedin slide">
<p>share</p>
</div>
</div>
</section>

Pinterest Button:

<section class="social-buttons"> 
<div class="slide-social">
<div class="button"> <a href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a> </div>
<div class="pinterest icon"> <i class="fa fa-pinterest"></i> </div>
<div class="pinterest slide">
<p>pin it</p>
</div>
</div>
</section>
<!-- Pinterest JS --> 
<script src="https://assets.pinterest.com/js/pinit.js"></script>