Social Sharing buttons with Sliding Effects Using CSS3

Hello Friends. I again come with Social Sharing Buttons with Cool Sliding Effects Using CSS3. You know very well the importance of social media for your blog.This time i tried my level best to design such dynamic effects on sharing button using CSS3, so that it becomes more attractive without any rich code.In this buttons i added Google Plus, Facebook, Twitter and Mail buttons. These all the major social media channels, give more loyal visitors for your blog.I designed these buttons in this manner so that you can add these button any where in your blog or website, but it looks pretty at bottom or top of the page. Any Way here is the simple steps to add these buttons in your blog or website.

DEMO

How to add these sharing Buttons

1. The CSS3 code of these sharing buttons are given below. You have to write this code in your Style.css file.

q:before,q:after{content:''}
ol,ul{list-style-position:outside;padding-left:.95em}
li{list-style-type:disc}ol li{list-style-type:decimal}
.pbt_share-links{font-size:.8em;width:215px;z-index:1;}.pbt_share-links>.heading{display:inline-block;min-width:105px;text-align:center;color:#000}.pbt_share-links>ul{margin-bottom:29px}.pbt_share-links>ul>li{display:inline-block;overflow:hidden;margin-left:5px; padding:0px;}.pbt_share-links .share-link{display:inline-block;width:20px;height:20px;line-height:20px;text-align:left;background:#606060 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvAVFq48IbOqtx0U46IZDmVtdPLmsH6eIDcirUUiahAKRshmchC5AYhuG3mxdFbRVx-nh22CS68SsEwLYjjZFdZjsxOYAKvQR6CupvjaVulFiGuIvwj2GYCnNRZpwCVY_VlWrldix790J/s1600/social-sprite.png") scroll 0 0 no-repeat;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-transition:none .3s ease-out;-moz-transition:none .3s ease-out;-ms-transition:none .3s ease-out;-o-transition:none .3s ease-out;transition:none .3s ease-out;-webkit-transition-property:min-width,background-color;-moz-transition-property:min-width,background-color;-ms-transition-property:min-width,background-color;-o-transition-property:min-width,background-color;transition-property:min-width,background-color;min-width:0;color:#fff}.pbt_share-links .gplus{background-position:0 0}.pbt_share-links .gplus:hover{min-width:111px;background-color:#dd4b39}.pbt_share-links a.twitter{background-position:0 -20px}.pbt_share-links a.twitter:hover{min-width:83px;background-color:#419ad9}.pbt_share-links a.facebook{background-position:0 -40px}.pbt_share-links a.facebook:hover{min-width:94px;background-color:#3b5998}.pbt_share-links a.email{background-position:0 -60px}.pbt_share-links a.email:hover{min-width:77px;background-color:#5fc355}.pbt_share-links .share-link>span{display:inline-block;width:300px;padding-left:23px;color:#fff}.pbt_share-links .gplus>span>div{position:relative;top:2px;right:-2px}.page_title{margin:5px 0 0 0}

We sure that this code is added at the top of the Style.css file so that your theme cascading does not violate the other code.

   2.  Buttons decoration code is following. Add this Code where you want to show these sharing buttons.

<div class="pbt_share-links">
  <ul>
<li><span class="share-link gplus" title="Probloggingtools on Google Plus"><span>GOOGLE + <g:plusone size="small" annotation="none" href="http://www.probloggingtools.com/"></g:plusone></span></span></li>
<li><a class="share-link twitter" href="http://twitter.com/probloggingtool" title="Probloggingtools on Twitter"><span>TWITTER</span></a></li>
<li><a class="share-link facebook" href="http://www.facebook.com/probloggingtools" title="Probloggingtools on Facebook"><span>FACEBOOK</span></a></li>
<li><a class="share-link email" href="mailto:admin@probloggingtools.com" title="Reach us by email"><span>EMAIL</span></a></li>
                </ul>
              </div><!-- .pbt_share-links -->
              <script type="text/javascript">
             
               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>

     3. Edit the Social Media Links with your blog or website (Bold Words).

Credits

These sharing buttons are fully designed by the PBT. If you want to share it with your reader, you have to give a back link to PBT.

Need Help ??

If you facing any problem to implement these buttons in your blog or website, feel free to ask here. If you have any other idea or sharing buttons designs, share it with us.