Hover fade effect with button rounded corners

Posted on by

0

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');
	});
});

Make Zoom Menu CSS

Posted on by

0

In this post. I will be show you how to make a zoom menu by css.

Step 1: We will make a structure html as below.

<div id="container">
<ul>
    <li class="menu1"><a href="">menu 1</a></li>
    <li class="menu2"><a href="">menu 2</a></li>
    <li class="menu3"><a href="">menu 3</a></li>
    <li class="menu4"><a href="">menu 4</a></li>
</ul>
</div>

Step 2: Use css to style menu

ul {
	position: relative;
	width: 400px;
	height: 28px;
	list-style: none;
	overflow: hidden;
	padding: 0px 0px 0px 5px;
	/*border-top: 1px solid #c2c2c2;
	border-bottom: 1px solid #c2c2c2;*/
}
li.menu1 a, li.menu2 a, li.menu3 a, li.menu4 a {
	position: absolute;
	width: 100px;
	height: 25px;
	top: 0px;
	text-decoration: none;
	text-align: center;
	border-right: 1px solid #c2c2c2;
}
li.menu1 a {
	left: 5px;
}
li.menu2 a {
	left: 100px;
}
li.menu3 a {
	left: 200px;
}
li.menu4 a {
	left: 300px;
	border: none;
}
li.menu1 a:hover, li.menu2 a:hover, li.menu3 a:hover, 
li.menu4 a:hover {
	background: url(bg-hover.png) no-repeat 0 0;
	color: #fff;
	position: absolute;
	width: 110px;
	height: 28px;
	top: 0px;
	text-decoration: none;
	text-align: center;
	border: none;
}
li.menu1 a:hover {
	left: 0px;
}
li.menu2 a:hover {
	left: 95px;
}
li.menu3 a:hover {
	left: 195px;
}
li.menu4 a:hover {
	left: 295px;
}

Final Result: