Mention fade effect button, maybe you will instantly think to two button.
One is fade in and another is fade out. It’s easy with a normal button.
But, in this case. I want mention to a button rounded corners.
How to make fade effect on button rounded corners? Ok, as below is solution to process it.
Step 1: Structure HTML
<div class="BtnFade"> <a href="#">Fade Button</a> <div class="Fout"><span></span></div> <div class="Fin"><span></span></div> </div>
Step 2: Style CSS
.BtnFade {float: left; height: 21px; cursor: pointer; position:relative;} .BtnFade a {text-decoration: none; font-size: 1em; background: transparent; position: absolute; top: 0; left:0; color: #ffffff; z-index: 4; padding: 0px 11px; white-space: nowrap; overflow: hidden; display:block;} .BtnFade a:hover {color: #08288b;} .BtnFade div.Fout, .BtnFade div.Fin { position: absolute; top: 0; left: 0; height: 21px; background: url(button-radius.png) no-repeat left top; z-index: 3; } .BtnFade div.Fout span, .BtnFade div.Fin span { display: block; background: url(button-radius.png) no-repeat right -24px; height: 21px; margin-left: 11px; } .BtnFade div.Fin { background-position: left -50px; z-index: 1; } .BtnFade div.Fin span { background-position: right -76px; }
Step 3: Javascript to make fade effect
jQuery('.BtnFade').each(function(){ var wBtn = jQuery(this).find('a').outerWidth(); jQuery(this).css({width: wBtn + "px"}); jQuery(this).children('.Fout').css({width: wBtn + "px"}); jQuery(this).children('.Fin').css({width: wBtn + "px"}); jQuery(this).hover(function(){ jQuery(this).children('.Fout').stop().animate({opacity:0},200,'linear'); jQuery(this).children('.Fin').stop().animate({opacity:1},200, 'linear'); }, function(){ jQuery(this).children('.Fin').stop().animate({opacity:0},200,'linear'); jQuery(this).children('.Fout').stop().animate({opacity:1},200, 'linear'); }); });