CSS3 Social widget with hover effect

Social network also play a major role in your blog/website traffic. You can get huge visitors from social networking site.
Now i am share a cool and nice social network widget. It work with CSS code with mouse hover effect. This widget arranged vertically elegant buttons. This widget also attractive because of highlighted color combination. It's a good impression on visitors. you can easily add this widget to your Blogger blog.

DEMO

Follow this post and add this widget on your blog....

    1.   Go to Blogger Dashboard

    2.   Select Layout option

    3.   Click on Add a Gadget

    4.   Select HTML/JavaScript Widget.

    5.   Copy below code and paste inside that widget.

<style type="text/css"> #buttonbg {width: 260px;margin: 10px 20px;padding: 0;} #buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none; } #buttonbg .icon {background: #D91E76 url('http://2.bp.blogspot.com/-JKB0aVYaIW0/UC-oBl8NXxI/AAAAAAAAEYA/IbgyikdkM5A/s1600/blsocial12.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;} #buttonbg span:hover {visibility: hidden;} #buttonbg span {display: block;top: 15px;position: absolute;left: 90px;} #buttonbg .icon {color: #fafafa;overflow: hidden;} #buttonbg .fb {background-color: rgba(45,118,185, .42);background-position: 0 -382px;} #buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;} #buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} #buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;} #buttonbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} #buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;} #buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} #buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;} #buttonbg li:hover .icon {width: 250px; } #buttonbg li:hover .icon {background-color: #d91e76; } #buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;} #buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; } #buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;} #buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; } #buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;} #buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;} #buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; } #buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; } #buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;} </style>
<ul id="buttonbg">
<li><a class="icon fb" href="http://www.facebook.com/tunerproblog" rel="nofollow" target="_blank">Like us on Facebook</a></li>
<li><a class="icon twit"href="https://twitter.com/tunerproblog" rel="nofollow" target="_blank">Follow us on Twitter</a></li>
<li><a class="icon google" href="https://plus.google.com/116777354544796606826" rel="nofollow" target="_blank">Follow us on Google+</a></li>
<li><a class="icon pint" href="http://pinterest.com/sumhasib" rel="nofollow" target="_blank">Follow us on Pinterest</a></li>
<li><a class="icon ytube" href="http://www.youtube.com/USERNAME" rel="nofollow" target="_blank">Follow us on Youtube</a></li>
<li><a class="icon rss" href="http://feedburner.google.com/fb/a/mailverify?uri=tunerpro"rel="nofollow" target="_blank">Subscribe via RSS</a></li>
</ul>

    6.   Make the Following Changes

> Replace tunerproblog with your Facebook Username.
> Replace tunerproblog with your Twitter Username.

> Replace 116777354544796606826 with your google+ id.

> Replace sumhasib with your Pinterest Username.

> Replace USERNAME with your Youtube username.

> Replace tunerpro with your feedburner username.

    7.   Save the widget and you're done.

If you like this post please share it with your friends.
Thanks..................