Smooth & Sexy Expand On Hover Social Buttons For Blogger:Digital Tech Inspiration

As we all know every blog/website have some kind of social sharing button widget. The social buttons widget we are going to share today will do the same to a certain extent as we have shared some of them before inour previous tutorials.The
widget looks neat and clean in your sidebar or anywhere else with a smooth and 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 live 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/website.

LIVE DEMO

How to Add a Smooth & Sexy Expand On Hover Social Buttons for Blogger Blog?

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Layout

STEP #3: Click on Add a Gadget

STEP #4: Select HTML/JavaScript gadget.

STEP #5: Copy/Paste the following code inside that gadget.

<style>

#wtss{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}

#wtss a{text-decoration:none; font-family:trebuchet ms,sans-serif;}

#wtss li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}

#wtss .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/AVvXsEhzDKPmp_xs1JltWriEQLA8msxsdvmSFRDrshf9_RjYnijIWsLfckm7HoTaVvc9bdTtsJ7UchEAWzueSEFcapcAtbFdzLIrOHW-YD7lAqyRjCA6W65rbQzE4L9KRaW8itcSTBZmwWECW-s/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;}

#wtss li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}

#wtss .icon{overflow:hidden; color:#fafafa;}

#wtss .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}

#wtss .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}

#wtss .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}

#wtss .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}

#wtss .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}

#wtss li:hover .icon,

.touch #wtss li .icon{width:210px;}

.touch #wtss li .facebook, #wtss li:hover .facebook{background-color:rgba(59,89,152,1);}

.touch #wtss li .twitter, #wtss li:hover .twitter{background-color:rgba(64,153,255,1);}

.touch #wtss li .googleplus, #wtss li:hover .googleplus{background-color:rgba(228,69,36,1);}

.touch #wtss li .pinterest, #wtss li:hover .pinterest{background-color:rgba(174,45,39,1);}

.touch #wtss li .rss, #wtss li:hover .rss{background-color:rgba(255,102,0,1);}

</style>

<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/WIKITECHNOL">Follow us on Facebook</a></li>

<li data-alt="Follow us on Twitter"><a class="icon twitter" href="http://www.twitter.com/WIKITECHNOL">Follow us on Twitter</a></li>

<li data-alt="Follow us on Google+"><a class="icon googleplus" href="http://plus.google.com/107244857879006042054">Follow us on Google+</a></li>

<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://www.pinterest.com/wikitechnol">Follow us on Pinterest</a></li>

<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/WIKITECHNOL">Subscribe with RSS</a></li>

</ul>

Customization:

Replace WIKITECHNOL with your Facebook username.
Replace WIKITECHNOL with your Twitter username.
Replace WIKITECHNOL with your feedburner username.
Replace 107244857879006042054 with your Google+ ID.
Replace wikitechnol with your Pinterest ID.

STEP #6: Now click on Save and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.