It is important to make your RSS button stand out in web design and there are many techniques. I have seen many sites use this kind of lighting up RSS button. For example: vectorvalley.com:

It is only a simple animation technique. In this tutorial, I will show you how to do it with jQuery Fading effect. It is actually very simple.

You can look at the demo first.

First, I downloaded this RSS icon from devian art
Then I made it black and white

What we gonna do is to make the button fade from black and white to full color. We set black white as default so your RSS button’s background image is rss_bw.png at first.

HTML

Let’s do some simple preparation: the html is very simple.

<div id="rss"><a href="#" title="fancy light up RSS"></a></div>

CSS Code

At this part, we need to define RSS buton’s default background image as well as span that holds the colored background image.

body{
background:#000;}
#rss{
width:500px;
height:500px;
margin:auto;
position:relative;
display:block;}
#rss a{
	background-image:url(rss_bw.png);
	background-repeat: no-repeat;
	position:relative;
display:block;
width:500px;
height:500px;
}
 #rss span.hover{
 width:500px;
height:500px;
 background-image:url(rss.png);
	background-repeat: no-repeat;
	position:relative;
display:block;}

Using fadeTo

fadeTo( speed, opacity, [callback] )

What this javascript does is find “a” under #rss > append “span” within a element > set span’s opacity to 0 at first > when user hovers in, change the opacity to 1 within 800ms > when user hovers out change the opacity back
This is what the html looks like with JavaScript

Make fancy light up RSS button with jQuery fading

$(function () {  
  $('#rss a')   
    // create our new span.hover and loop through anchor:
    .append('<span class="hover" id="rsscolor"/>').each(function () {
      var $span = $('> span.hover', this).css('opacity', 0);      
      // when the user hovers in and out 
      $(this).hover(function () {
        // on hover
        // stop any animations currently running, and fade to opacity: 1
        $span.stop().fadeTo(800, 1);
      }, function () {
        // off hover
        // again, stop any animations currently running, and fade out
        $span.stop().fadeTo(800, 0);
      });
    });
});

ADD TO

If this helps, why not tell your friends?

• 
• 
• 
• 
• 
• 
• 
• 
• 
•