提到Web上的按钮，大家会想到什么呢，古板的默认按钮，还是样式化的链接来代替的按钮？无论是什么，一个漂亮的按钮在页面上肯定会引起访问者的注意，并且因为是按钮（或按钮型的链接），所以也会有点一点的冲动。下面我就介绍一下如何用jQuery或才CSS3来制作简单的动态按钮。

先看一下例子吧：DEMO。（请使用Firefox4.0+、Chrome、Safari、Opera10.5+观看）

使用jQuery的方法

DEMO中我使用的是<a>标签，然后用的图片（来自Tutorial9）来制造的按钮。那么渐变的动画效果是怎么样来的呢？我解释一下，一个<a>标签写的链接，在DOM中的结构应该是这样的

<a href=”#”>HOME</a>

如果我们分别为:link和:hover指定不同的背景，那么鼠标悬浮的时候肯定按钮是动不起来的。这时，我们变通一下。用jQuery在<a>里面生成一个span标签作为子元素，为它指定hover状态的背景图片。因为是按钮切换时是渐变状态，所以我们就把span的透明度设置为0，鼠标悬浮上去的时候把span的透明度设置为1，这样就能把a标签本来的背景图片挡住，就实现了DEMO中的效果。变换之后的DOM结构是这样的：

<a href=”#”>
    HOME 
    <span class=”hover”></span>
</a>

然后添加jQuery效果，代码如下，注释都包含在里面了：

$(function(){
	$('a.jsbutton').each(function(){	//遍历所有的需要添加效果的按钮
		//生成span标签，并把它插入到a标签的里，并将生成的span元素的透明度设置为0
		$('<span class="hover"></span>').appendTo(this).css('opacity','0');
		//用span这个变量来保存这个生成的span元素
		var span = $(this).find('span.hover');
		//为当前的a标签绑定hover事件
		$(this).hover(function(){
			//鼠标悬浮时，将生成的span元素的透明度设置为1，用来显示悬浮状态
			span.stop().fadeTo('slow',1);
		},function(){
			//鼠标离开时，将生成的span元素的透明度设置为0，用来显示a链接本来的背景
			span.stop().fadeTo('slow',0);
		});
	});
});

这里再次强调一下stop()方法的作用：

stop( [clearQueue] [, gotoEnd] )

两个参数均为可选，它们都是布尔值

clearQueue表示是否清空未执行完的动画序列

gotoEnd表示是否将正执行的动画跳转到末状态

如果两个参数均不设置，则它会立即停止当前元素的动画。如果动画序列中还有其他的动画，则会以当前状态开始执行接下来的动画

文中用到的方法，就是粗体标出的部分。

CSS3 Transition方法

这是纯的CSS3方法，所以代码是不涉及JS的，虽然比较简单，但效果不如JS，所以如果对视觉性的要求不是很高，用这个也未偿不可。另外，浏览器兼容能力有限，最后效果不能保证。核心代码如下：

.css3 a{
	/*css3 trasition变换，这里指定变换背景*/
	-moz-transition:background 0.4s linear;
	-webkit-transition:background 0.4s linear;
	-o-transition:background 0.4s linear;
}
.css3_a a:hover{
	opacity:0.75;
	/*css3 trasition变换，这里指定变换透明度*/
	-moz-transition:opacity 0.6s linear;
	-webkit-transition:opacity 0.6s linear;
	-o-transition:opacity 0.6s linear;
}

具体的CSS3的trasition方法，我就不介绍了，有兴趣的朋友们去看看W3C的那页（目前我没兴趣，收着暂时没看=_=）。