PURE CSS3 SMOOTH & SEXY EXPAND ON HOVER SOCIAL BUTTONS FOR BLOGGER

Almost every blog or website has some kind of social follow us buttons. Such buttons great for getting your readers involved in your social networks and obviously it will increase your social reputation and brand name. But that is only possible if the reader clicks on the button and follow your blog on social networks. Obviously the reader will follow only if he/she finds your blog useful; hence, we cannot control that with any widget.
But we can at least make the reader to click on the button by increasing the sexiness of the buttons. The social buttons widget we are going to share today will do the same to a certain extent. There is no JavaScript or jQuery involved in this widget. It's pure CSS. The widget looks neat and clean in your sidebar or anywhere else with a smooth sexy expand on hover effect which will tempt the reader to click the button at least once. The effect once again comes with help of our favorite CSS3 transitions. Make sure that we are not going to force the readers to click on the buttons. We are just trying to increase of the chances of clicking by giving some cool effects to the buttons. Have a look at the demo and if you find it amazing or just want to give it a try, then get on with the tutorial to add it on your blog.

Features:

The widget is pretty straightforward but still here are some of the main features of this widget:

Covers the most used four social networking buttons plus an RSS icon

Smooth Sexy expand on hover

Use of CSS sprites

Very neat and clean

No JavaScript. No jQuery. It's pure CSS

The CSS sprites technique is pretty cool and useful especially when you have too many images. In this widget you will think that one image or icon is used for each button which makes a total of 5 images. But actually there is only one image used which contains all the icons. This technique is useful because instead of 5 HTTP requests, you are just making one request which speeds up the loading time. This technique is not very common in Blogger blogs but in WordPress blogs it is used often.

Now let's add this widget on your blog.

Note: If you want to add the widget on a specific place, then use the separate HTML and CSS and if you want the widget to appear somewhere in your sidebar, then jump directly at the Alternative section at the bottom.

The HTML

The skeleton of the sexy buttons.

Go To Blogger -> Template -> Edit HTML -> Proceed

Paste the following code wherever you want the widget to appear

<!--Sexy Social Buttons Widget By infozhelper.com-->
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<!--Sexy Social Buttons Widget By infozhelper.com-->

Replace all # with your respective social networking URLs.

The CSS

Now some meat on the skeleton which will make it look sexy :p

Go To Blogger -> Template -> Edit HTML -> Proceed

Search for ]]></b:skin> and just above it paste the following code and Save template

/* Sexy Social Buttons Widget By infozhelper.com */
#ihsose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#ihsose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#ihsose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#ihsose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVDPfGKsxuWY63ADeskx1_EV0q4XdzUVYPcOkGiPYQDiFwtqypDQJ9zVIE45wBv_k6LlGJof8ik9t0mp_iJTNVEodU1Mn3TjG8xRRlbQBKkYYqEQkTYyKfcyyFcBmaEHI9ot3ZxTgmw8E/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#ihsose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#ihsose .icon{overflow:hidden; color:#fafafa;}
#ihsose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
/* Sexy Social Buttons Widget By infozhelper.com */

There is nothing required to change in the CSS and hence, we have compressed the CSS.

Alternative

If you want to add this widget somewhere in your sidebar, then follow these steps.

Go to Blogger -> Layout

Click Add a Gadget in your sidebar

Select HTML/JavaScript from the list and paste the following code in that gadget

/* Sexy Social Buttons Widget By infozhelper.com */
#ihsose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#ihsose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#ihsose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#ihsose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVDPfGKsxuWY63ADeskx1_EV0q4XdzUVYPcOkGiPYQDiFwtqypDQJ9zVIE45wBv_k6LlGJof8ik9t0mp_iJTNVEodU1Mn3TjG8xRRlbQBKkYYqEQkTYyKfcyyFcBmaEHI9ot3ZxTgmw8E/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#ihsose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#ihsose .icon{overflow:hidden; color:#fafafa;}
#ihsose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<!--Sexy Social Buttons Widget By infozhelper.com-->