Fancy Sliding Social Follow Me Buttons For Blogger

These are one more in our Social Media collection. This buttons are named "Fancy Sliding Social Follow Me Buttons". Why Fancy? Because they look a bit comic and like cartoon. Why Sliding? Because on hover the simple black icon with border slides down and changes to colored button with white icon in it. After seeing the image you might think it has reflection effect too. But, it does not. We have just added that effect to make the image look better. Sorry, for that. Now, have a look at this widget demo below.

Demo:

Step To Add Fancy Sliding Follow Me Button:

Go to Blogger Dashboard.
Go to Layout.
Click on Add a Gadget >> HTML/Javascript.
Paste the below code there.

<div class="social-wrap">
<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>
.social-wrap ul li {
list-style: none;
border-bottom: none;
}
.social-wrap li a {
margin: 5px 5px 0px 5px;
padding: 0px 0px 0px 0px;
width: 59px;
height: 59px;
float: left;
text-indent: -99999px;
border: solid 1px #222121;
border-radius:5px;
-webkit-transition: All 0.3s ease-out;
-moz-transition: All 0.3s ease-out;
-o-transition: All 0.3s ease-out;
}
.social-wrap li a.facebook {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPpw-IxRHWapuruML9MXb5Ry14ctAgGTw1Zd1aDJT_MRiPhLVkVA4vmqk-GcDqDVDWNANmr5cH3QslmpoNGFBg4fp0LvPjO26YJ3d17f3Uo5ufwXUL9O28RTUiHsxswuMs-YqFp4lWxg/s1600/facebook.png) no-repeat -0px -88px;
}
.social-wrap li a.facebook:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPpw-IxRHWapuruML9MXb5Ry14ctAgGTw1Zd1aDJT_MRiPhLVkVA4vmqk-GcDqDVDWNANmr5cH3QslmpoNGFBg4fp0LvPjO26YJ3d17f3Uo5ufwXUL9O28RTUiHsxswuMs-YqFp4lWxg/s1600/facebook.png) no-repeat -0px -0px;
}
.social-wrap li a.twitter {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBWv86bIkWkpZeUlvRClIRflzb8XqUi-Aj5vu_ICoFLkhXeYluqfP1YK2-OSjFz9IKHP2wqoJoKMKCAM8pSqKSmd7_7kDdzHxmeETMhFoGgVAsfEJKM__45Wjj9k6ItEklHRXZn_rlNQ/s1600/twitter-1.png) no-repeat -0px -88px;
}
.social-wrap li a.twitter:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBWv86bIkWkpZeUlvRClIRflzb8XqUi-Aj5vu_ICoFLkhXeYluqfP1YK2-OSjFz9IKHP2wqoJoKMKCAM8pSqKSmd7_7kDdzHxmeETMhFoGgVAsfEJKM__45Wjj9k6ItEklHRXZn_rlNQ/s1600/twitter-1.png) no-repeat -0px -0px;
}
.social-wrap li a.google-p {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa2aK_FuPGUOUQIhXPOY2pwEJ8cQxEexO1MDH_9h5pqHxkThdmJYH1_4rNj3BUpDDM7VaufDX1ehmaVWbqdLgoRv53cMyf2bqEm-v9stMkIY6BC0YShUhfjVg3sQKIvRxn9rI-V0KhA/s1600/google.png) no-repeat -0px -88px;
}
.social-wrap li a.google-p:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa2aK_FuPGUOUQIhXPOY2pwEJ8cQxEexO1MDH_9h5pqHxkThdmJYH1_4rNj3BUpDDM7VaufDX1ehmaVWbqdLgoRv53cMyf2bqEm-v9stMkIY6BC0YShUhfjVg3sQKIvRxn9rI-V0KhA/s1600/google.png) no-repeat -0px -0px;
}
.social-wrap li a.rss {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hdfSJt7SmzVQR48Sdj8PqZ6SlET_hCOELJEKkkZlRXwL3iLLTyyzXdhd7T7zRwg-DNh69MPIns1CQk5E5C9-ou7fiGGBOSE9dyJET2Ob34j4Nxv_3m990LMMKQsuPRv8RoCk_dyhDw/s1600/twitter.png) no-repeat -0px -88px;
}
.social-wrap li a.rss:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hdfSJt7SmzVQR48Sdj8PqZ6SlET_hCOELJEKkkZlRXwL3iLLTyyzXdhd7T7zRwg-DNh69MPIns1CQk5E5C9-ou7fiGGBOSE9dyJET2Ob34j4Nxv_3m990LMMKQsuPRv8RoCk_dyhDw/s1600/twitter.png) no-repeat -0px -0px;
}
</style>