Cool mouse hover Social Subscribe Buttons code and trick

Cool mouse hover Social Subscribe Buttons code and trick for websites and blogs is here. Social Subscribe buttons are very important to connect with the audience. Therefore, many bloggers and webmasters are adding them in their blogs and websites.
 
Every visitor comes to your website with some purpose. if visitor like what he/she is looking for? then he will hit the social button. Some bloggers and webmasters uses old stylize buttons which does not add anything to the website but takes important place of the website.

I have many seen many famous blogs like Labnol, the main focus of most of these popular blogs is to use cool mouse hover social subscribe buttons.

You might have seen some social subscription buttons or 3D pressable buttons for your websites and blogs but unfortunately you cannot get the trick and code to add them to your website or cannot able to download the subscribe buttons code. But now, I give you code and trick of this cool mouse hover subscribe box. Users can play with this subscribe buttons with mouse hover.


Here is the Image of this box:

Features:-

1. This box or buttons are well formed.
2. This box has no price (Free of Cost).
3. Easy to Install and navigate.

Here is another image of the box:

                                             

How to add this widget in Blogger Blog:

• Go to www.blogger.com and log in to your account.
• Then Click on Layout option.
• In Layout, click on Add a Gadget.

• Now click on HTML/JavaScript option to add widget.

                                                                                                                                                                                

• Copy and Paste the following code in the area.

CSS

<style>
#Geek-SNS {
width: 260px;
margin: 5px 20px;
padding:5px;
}
#Geek-SNS li {
cursor: pointer;
height: 48px;
position: relative;
list-style-type: none;
}
#Geek-SNS .icon {
background: #D91E76 url('http://3.bp.blogspot.com/-unjaHZfdU1k/UK7b1J4pfOI/AAAAAAAAAzA/r7ccqS2FovU/s1600/MoreBlogTools-SNS.png') 0 0 no-repeat;
background-color: rgba(217, 30, 118, .42);
border-radius: 30px;
display: block;
color: #141414;
float:none;
height: 48px;
line-height: 48px;
margin: 5px 0;
position: relative;
text-align: left;
text-indent: 90px;
text-shadow: #333 0 1px 0;
white-space: nowrap;
width: 48px;z-index: 5;
-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;
-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;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
text-decoration: none;
}
#Geek-SNS span:hover {
visibility: hidden;
}
#Geek-SNS span {
display: block;
top: 15px;position: absolute;
left: 90px;
}
#Geek-SNS .icon {
color: #fafafa;
overflow: hidden;
}
#Geek-SNS .fb {
background-color: rgba(45,118,185, .42);
background-position: 0 -382px;
}
#Geek-SNS .twit {
background-color: rgba(0, 161, 223, .42);
background-position: 0 -430px;
}
#Geek-SNS .google {
background-color: rgba(167, 0, 0, .42);
background-position: 0 -478px;
}
#Geek-SNS .pint {
background-color: rgba(204, 0, 0, .42);
background-position: 0 -526px;
}
#Geek-SNS .linked {
background-color: rgba(0, 87, 114, .42);
background-position: 0 -574px;
}
#Geek-SNS .deviant {
background-color: rgba(76, 122, 74, .42);
background-position: 0 -622px;
}
#Geek-SNS .ytube {
background-color: rgba(170, 0, 0, .42);
background-position: 0 -670px;
}
#Geek-SNS .rss {
background-color: rgba(255,109, 0, .42);
background-position: 0 -718px;
}
#Geek-SNS li:hover .icon {
width: 250px;
}
#Geek-SNS li:hover .icon {
background-color: #d91e76;
}
#Geek-SNS li:hover .fb {
background-color: #2d76b9;
background-position: 0 2px;
}
#Geek-SNS li:hover .twit {
background-color: #00A1DF;
background-position: 0 -46px;
}
#Geek-SNS li:hover .google {
background-color: #A70000;
background-position: 0 -94px;
}
#Geek-SNS li:hover .pint {
background-color: #C00;
background-position: 0 -142px;
}
#Geek-SNS li:hover .linked {
background-color: #005772;
background-position: 0 -190px;
}
#Geek-SNS li:hover .deviant {
background-color: #4C7A4A;
background-position: 0 -238px;
}
#Geek-SNS li:hover .ytube {
background-color: #A00;
background-position: 0 -286px;
}
#Geek-SNS li:hover .rss {
background-color: #EC5601;
background-position: 0 -334px;
}
#Geek-SNS .icon:active {
bottom: -2px;-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
</style>

 HTML

<ul id="Geek-SNS">
<li><a href="www.facebook.com/USERNAME" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span>
</li>
<li><a href="https://twitter.com/USERNAME" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span>
</li>
<li><a href="https://plus.google.com/u/0/100716998586085719378" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span>
</li>
<li><a href="http://pinterest.com/USERNAME/" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span>
</li>
<li><a href="http://www.blogname.com/feeds/posts/default" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span>
</li>
</ul>

 Customization

1. Customise USERNAME with your Facebook profile.
2. Customise USERNAME with your Twitter profile.
3. Customise 100716998586085719378 with your Google + Id.
4. Customise USERNAME with your Pinterest profile.
5. Customise blogname with your Blog name or Website.

I hope that above cool mouse hover social subscribe buttons