3D Follow Me Buttons With Hover Effect

Pure Css Buttons For blogger with Effects like Floating, Hover, Black and White to Coloured. This Buttons Include Facebook Fanpage Link,Twitter Follow me Link , Rss Feed Post link and Google+ Profile link. This buttons will float on the right side of webpage and on hover the uncoloured buttons will transform into a 3D coloured button.This are made by Aditya Thakker and the icons are taken from Devainart.com.

Follow the Below Steps:

1. Login to Dashboard.
2. Go to Layout--->Add a Gadget.
3. Choose for Html/Javascript.
4. Copy and Paste the below code there.

<style>
.blogtoolz-flt-wdt
{
position:fixed;
right:10px;
top:36% ;
}
.blogtoolz-flt-wdt img
{
float:right; clear:right; margin:1px;
-webkit-transition: all .0s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.blogtoolz-flt-wdt img:hover
{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
 -o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
 }
</style>
<div class="blogtoolz-flt-wdt">

<style>
.BlogToolz1 {
 display: block;
 width: 64px;
 height: 64px;
 background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_rollout_64x64.png') bottom;
 text-indent: -99999px;
}
.BlogToolz1:hover {
        background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_color_64x64.png') bottom;
height: 64px;
}
</style>
<a class="BlogToolz1" href="Your Facebook Link Here"></a>



<style>
.BlogToolz2 {
 display: block;
 width: 64px;
 height: 64px;
 background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitterl_rollout_64x64.png') bottom;
 text-indent: -99999px;
}
.BlogToolz2:hover {
        background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitter_color_64x64.png') bottom;
height: 64px;
}
</style>
<a class="BlogToolz2" href="Your Twitter Link Here"></a>



<style>
.BlogToolz3 {
 display: block;
 width: 64px;
 height: 64px;
 background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_rollout_64x64.png') bottom;
 text-indent: -99999px;
}
.BlogToolz3:hover {
        background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_color_64x64.png') bottom;
height: 64px;
}
</style>
<a class="BlogToolz3" href="Your Rss Feed Link Here"></a>



<style>
.BlogToolz4 {
 display: block;
 width: 64px;
 height: 64px;
 background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_rollout_64x64.png') bottom;
 text-indent: -99999px;
}
.BlogToolz4:hover {
        background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_color_64x64.png') bottom;
height: 64px;
}
</style>
<a class="BlogToolz4" href="Your Google Plus Link Here"></a>

</div>
<!-- End -->

Now, Click On Save.


It's Done.

Categories: Blogger Widgets , Social Media Gadgets