Add Social Sprite Subscribe Buttons with Hover Effect in Blog

If you are looking to add Social Sprite Subscribe Buttons with Hover Effect in your website or blog then you come to right place. Here is an another article about CSS and HTML. With this code you can add social sprite subscribe buttons in blogger blog or wordpress with hover effect. You can also add these buttons in websites. All social websites are covered in these buttons.

In these buttons total 31 social websites are covered. Here is the image of buttons with some popular social websites:-

These buttons are round in shape and white in color with shadow and mouse hover effect.

Features:-

1. Round in shape.
2. White in color with hover and shadow effect.

Steps to add this in blogger:- 

• Go to www.blogger.com and click on Layout.
• In Layout, click on Add a Gadget. 
• Now Choose HTML/JavaScript option.
• When it opens, copy below code and paste in that area.

CSS Code:-

<style>.socialbar_transparent { width: 100%; min-height: 40px; padding: 0; font-size: 0; z-index: 999;}.socialbar_transparent:after { clear: left; content: " ";}.borderless .ss li { border: none; }.borderless .ss li:first-child { border: none; }.borderless li { border: none; }.borderless li:first-child { border: none; }/* Social Sprites: Shapes================================================== */.sssquare { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; }.sscircle { overflow: visible !important; }.sscircle li { border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; background-color: #FFF;-webkit-box-shadow:0 2px rgba(0,0,0,0.3);     -moz-box-shadow: 0 2px rgba(0,0,0,0.3);     box-shadow:0 2px rgba(0,0,0,0.3);         margin-right: 5px !important; -webkit-transition: background-color 0.2s linear; -moz-transition: background-color 0.2s linear; -o-transition: background-color all 0.2s linear; -ms-transition: background-color all 0.2s linear; transition: background-color all 0.2s linear; }.sscircle li:active, .sscircle li a:active { border-radius: 100% !important; -moz-border-radius: 100% !important; -webkit-border-radius: 100% !important; }/* Social Sprites: General Listing================================================== */.ss { width: auto; margin: 0; padding: 0; text-align: center; overflow: hidden;}.ss li { display: inline-block; margin: 0; padding: 0; border-right: 1px solid rgba(0,0,0,0.2); background-image:url("http://demo.fwpolice.com/socialsprites/images/socialsprites.png"); background-repeat: no-repeat; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;}.ss li:hover { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;}.ss li:first-child { border-left: 1px solid rgba(0,0,0,0.2);}.ss li a { display: block; text-indent: -9999; height: 40px; width: 40px;}.ss li a:active { box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);}/* Social Sprites: Icon Classes================================================== */.ss li.digg { background-position: 0 0; }.ss li.digg:hover { background-position: 0 -40px; }.ss li.dribbble { background-position: 0 -80px; }.ss li.dribbble:hover { background-position: 0 -120px; }.ss li.facebook { background-position: 0 -160px; }.ss li.facebook:hover { background-position: 0 -200px; }.ss li.flickr { background-position: 0 -240px; }.ss li.flickr:hover { background-position: 0 -280px; }.ss li.forrst { background-position: 0 -320px; }.ss li.forrst:hover { background-position: 0 -360px; }.ss li.googleplus { background-position: 0 -400px; }.ss li.googleplus:hover { background-position: 0 -440px; }.ss li.html5 { background-position: 0 -480px; }.ss li.html5:hover { background-position: 0 -520px; }.ss li.icloud { background-position: 0 -560px; }.ss li.icloud:hover { background-position: 0 -600px; }.ss li.lastfm { background-position: 0 -640px; }.ss li.lastfm:hover { background-position: 0 -680px; }.ss li.linkedin { background-position: 0 -720px; }.ss li.linkedin:hover { background-position: 0 -760px; }.ss li.myspace { background-position: 0 -800px; }.ss li.myspace:hover { background-position: 0 -840px; }.ss li.paypal { background-position: 0 -880px; }.ss li.paypal:hover { background-position: 0 -920px; }.ss li.picasa { background-position: 0 -960px; }.ss li.picasa:hover { background-position: 0 -1000px; }.ss li.pinterest { background-position: 0 -1040px; }.ss li.pinterest:hover { background-position: 0 -1080px; }.ss li.reddit { background-position: 0 -1120px; }.ss li.reddit:hover { background-position: 0 -1160px; }.ss li.rss { background-position: 0 -1200px; }.ss li.rss:hover { background-position: 0 -1240px; }.ss li.skype { background-position: 0 -1280px; }.ss li.skype:hover { background-position: 0 -1320px; }.ss li.stumbleupon { background-position: 0 -1360px; }.ss li.stumbleupon:hover { background-position: 0 -1400px; }.ss li.tumblr { background-position: 0 -1440px; }.ss li.tumblr:hover { background-position: 0 -1480px; }.ss li.twitter { background-position: 0 -1520px; }.ss li.twitter:hover { background-position: 0 -1560px; }.ss li.vimeo { background-position: 0 -1600px; }.ss li.vimeo:hover { background-position: 0 -1640px; }.ss li.wordpress { background-position: 0 -1680px; }.ss li.wordpress:hover { background-position: 0 -1720px; }.ss li.yahoo { background-position: 0 -1760px; }.ss li.yahoo:hover { background-position: 0 -1800px; }.ss li.youtube { background-position: 0 -1840px; }.ss li.youtube:hover { background-position: 0 -1880px; }.ss li.github { background-position: 0 -1920px; }.ss li.github:hover { background-position: 0 -1960px; }.ss li.behance { background-position: 0 -2000px; }.ss li.behance:hover { background-position: 0 -2040px; }.ss li.yelp { background-position: 0 -2080px; }.ss li.yelp:hover { background-position: 0 -2120px; }.ss li.mail { background-position: 0 -2160px; }.ss li.mail:hover { background-position: 0 -2200px; }.ss li.instagram { background-position: 0 -2240px; }.ss li.instagram:hover { background-position: 0 -2280px; }.ss li.foursquare { background-position: 0 -2320px; }.ss li.foursquare:hover { background-position: 0 -2360px; }.ss li.zerply { background-position: 0 -2400px; }.ss li.zerply:hover { background-position: 0 -2440px; }</style>

HTML Code:- 

<div class="socialbar_transparent borderless">
<ul class="ss sscircle">
<li class="digg"><a href="#">digg</a></li>
<li class="dribbble"><a href="#">dribbble</a></li>
<li class="facebook"><a href="#">facebook</a></li>
<li class="flickr"><a href="#">flickr</a></li>
<li class="forrst"><a href="#">forrst</a></li>
<li class="googleplus"><a href="#">googleplus</a></li>
<li class="html5"><a href="#">html5</a></li>
<li class="icloud"><a href="#">icloud</a></li>
<li class="lastfm"><a href="#">lastfm</a></li>
<li class="linkedin"><a href="#">linkedin</a></li>
<li class="myspace"><a href="#">myspace</a></li>
<li class="paypal"><a href="#">paypal</a></li>
<li class="picasa"><a href="#">picasa</a></li>
<li class="pinterest"><a href="#">pinterest</a></li>
<li class="reddit"><a href="#">reddit</a></li>
<li class="rss"><a href="#">rss</a></li>
<li class="skype"><a href="#">skype</a></li>
<li class="stumbleupon"><a href="#">stumbleupon</a></li>
<li class="tumblr"><a href="#">tumblr</a></li>
<li class="twitter"><a href="#">twitter</a></li>
<li class="vimeo"><a href="#">vimeo</a></li>
<li class="wordpress"><a href="#">wordpress</a></li>
<li class="yahoo"><a href="#">yahoo</a></li>
<li class="youtube"><a href="#">youtube</a></li>
<li class="github"><a href="#">gitgub</a></li>
<li class="behance"><a href="#">behance</a></li>
<li class="yelp"><a href="#">yelp</a></li>
<li class="mail"><a href="#">mail</a></li>
<li class="instagram"><a href="#">instagram</a></li>
<li class="foursquare"><a href="#">foursqure</a></li>
<li class="zerply"><a href="#">zerply</a></li>
</ul>
</div>

Customization:-

• Change # with your profile URL's.
• If you want to delete any button, simply delete<li>to</li>. 

I hope that just like social subscribe buttons, sprite social buttons with hover effect will add more flavour to your blog. If you have any doubt then let us know.