交互设计中心-72色

超炫的button按钮效果，先看看效果吧。
第一个效果是没有jquery的效果，只用了css。
第二个是用jquery让北京图片从上往下出来的效果，图片做了特殊效果，很炫吧，高尚flash效果了。
第三个是背景图片左右移动的效果。
第四第五个是图片上下移动渐显渐隐效果。
html

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

css

ul { list-style:none; margin:0; padding:0; }
li { float:left; width:100px; margin:0; padding:0; text-align:center; }
li a { display:block;padding:5px 10px;height:20px;*height:29px;color:#FFF;text-decoration:none;border-right:1px solid #FFF; }
li a { background:url(bg.jpg) repeat 0 0; }
li a:hover { background-position:50px 0; }

jquery

$('#nav a')
	.css( {backgroundPosition: "0 0"} )
	.mouseover(function(){
		$(this).stop().animate(
			{backgroundPosition:"(0 -250px)"}, 
			{duration:500})
		})
	.mouseout(function(){
		$(this).stop().animate(
			{backgroundPosition:"(0 0)"}, 
			{duration:500})
		})

当然还用到了一个封装的js文件，就是对backgroundPosition的封装。
72色当然要提供打包下载了