Sliding Social icon With Hover Effect

This widgets is a social media widget These all buttons are Created using only CSS, in this widget no use of JavaScript so this is very fast in loading. These buttons have awesome hover effect, when you move mouse cursor on these buttons they change their style. This widget is easy to use and easily your visitors redirect on related social networking sites by with a single click.

Live Deme

How to Add this widget on blog

Go Dashboard > Layout > Add Gadget > HTML/JavaScript > Save.

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="###" target="_blank">Facebook</a></li>
<li><a class="twitter" href="###" target="_blank">Twitter</a></li>
<li><a class="google-p" href="###" target="_blank">Google plus</a></li>
<li><a class="rss" href="###" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTTXsm-j5bkQyoc1nbXamidYumgTnANwJL7HIFnFjZuXbPaR67ww1FbpS_cxq6EW9bikwInk9v1bSQ73rTQO7WKfKoX1WWp2d5wbzMc1p3-sb8u8fXqhGwtWFN_j85IaDldgzFdg997qWa/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTTXsm-j5bkQyoc1nbXamidYumgTnANwJL7HIFnFjZuXbPaR67ww1FbpS_cxq6EW9bikwInk9v1bSQ73rTQO7WKfKoX1WWp2d5wbzMc1p3-sb8u8fXqhGwtWFN_j85IaDldgzFdg997qWa/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMtqvMe2fZ_drQ_K3FJeiUAAj_mICp8ETInPN7iKBGHFwtCgUVebjH_PUkqa5mx5BbUULvQbqLs2vM2hTv0Ceb4-z8DJmvQibqLBccDDJtIWh9HdURZSMHXWGwvRGhYy8Cpess5Ztnonrn/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMtqvMe2fZ_drQ_K3FJeiUAAj_mICp8ETInPN7iKBGHFwtCgUVebjH_PUkqa5mx5BbUULvQbqLs2vM2hTv0Ceb4-z8DJmvQibqLBccDDJtIWh9HdURZSMHXWGwvRGhYy8Cpess5Ztnonrn/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguVSR_9N3-CoZD3tORStvo84HeSWRBWWuKi47PmvTMrSIMe6f2qPFxGjjyxUlxlmA_6ZwBfCIM9ZX57C9HVbIhbbDUquoapZGqXNaxsCNBbKOZoRZzPX6-KG_oaL_FvnKUbTiwoFSN1yRy/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguVSR_9N3-CoZD3tORStvo84HeSWRBWWuKi47PmvTMrSIMe6f2qPFxGjjyxUlxlmA_6ZwBfCIM9ZX57C9HVbIhbbDUquoapZGqXNaxsCNBbKOZoRZzPX6-KG_oaL_FvnKUbTiwoFSN1yRy/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg67gBjmTsN50Vapk60fEz7dKV1OjNo233sFH-fptXwOwU-0XrA09g4-uXLdBuLsvW8oeSxIp3qULVRf5P3opMfDgC7wtj7CjrR3JDO4FSfjVgIkyjJRSf5rYrIWe8lR1cNvxPZHgnyp_Vc/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg67gBjmTsN50Vapk60fEz7dKV1OjNo233sFH-fptXwOwU-0XrA09g4-uXLdBuLsvW8oeSxIp3qULVRf5P3opMfDgC7wtj7CjrR3JDO4FSfjVgIkyjJRSf5rYrIWe8lR1cNvxPZHgnyp_Vc/s1600/twitter.png) no-repeat 0 0}
</style>