Cool Mouse Hover Social Media Buttons For Blogger

Today I am gonna teach you how to add very responsive social widget for your blogger It is made with css and it is very simple to add this gadget to blog just follow the steps given below

Live demo

not avialable

<style>
#pctoolstips {
width: 260px;
margin: 5px 20px;
padding:5px;
}
#pctoolstips li {
cursor: pointer;
height: 48px;
position: relative;
list-style-type: none;
}
#pctoolstips .icon {
background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh71KrGsmlK0pKfzdAZXaLIzPqc2-r_xbtQmT9G0cdRZEM203VzqI0MZKC3DRYjwtUeeZS_jgKrAHXItG1StcQX4pTjRgiADNNc1BDprRhyphenhyphenhA-_Psu1F127zesrcmO3ApZic13-EmCBLyI/s1600/pctoolstips.blogspot.com.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;
}
#pctoolstips span:hover {
visibility: hidden;
}
#pctoolstips span {
display: block;
top: 15px;position: absolute;
left: 90px;
}
#pctoolstips .icon {
color: #fafafa;
overflow: hidden;
}
#pctoolstips .fb {
background-color: rgba(45,118,185, .42);
background-position: 0 -382px;
}
#pctoolstips .twit {
background-color: rgba(0, 161, 223, .42);
background-position: 0 -430px;
}
#pctoolstips .google {
background-color: rgba(167, 0, 0, .42);
background-position: 0 -478px;
}
#pctoolstips .rss {
background-color: rgba(255,109, 0, .42);
background-position: 0 -718px;
}
#pctoolstips li:hover .icon {
width: 250px;
}
#pctoolstips li:hover .icon {
background-color: #d91e76;
}
#pctoolstips li:hover .fb {
background-color: #2d76b9;
background-position: 0 2px;
}
#pctoolstips li:hover .twit {
background-color: #00A1DF;
background-position: 0 -46px;
}
#pctoolstips li:hover .google {
background-color: #A70000;
background-position: 0 -94px;
}
#pctoolstips li:hover .rss {
background-color: #EC5601;
background-position: 0 -334px;
}
#pctoolstips .icon:active {
bottom: -2px;-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
</style>
<ul id="pctoolstips">
<li ><a href="http://www.facebook.com/USERNAME1" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span>
</li>
<li ><a href="http://www.twitter.com/USERNAME2" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span>
</li>
<li ><a href="G+ URL" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span>
</li>
<li ><a href="http://feeds.feedburner.com/USERNAME3" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span>
</li>
</ul>