用好表单的按钮（二）

2022-07-15 80酷酷网 80kuku.com

　　按钮若想使表单按钮一改那死板板的老面孔，能象网页中其它导航菜单那样具有动态变换样式的效果且仍具其特殊地表单按钮功能，使它更具吸引人的魅力，采用本文介绍的制作方法是个不错的主意。请看下面的示例子。

　　一、动态变换文本按钮
鼠标不在按钮上
鼠标在按钮上

你看！这个按钮的效果不错吧？！制作这种效果的思路是这样的，利用CSS属性可以动态改变的特点，先给按钮定义两种外观样式，再在<input>标记中加上两个事件，即onmuseover（鼠标在按钮上）和onmuseout （鼠标离开按钮），我们用这两个事件分别调用不同的CSS定义的按钮外观样式，从而达到动态变换的效果。为了提高CSS的利用率（若有多个按钮，则可重复使用），把CSS放到<head>与</head>之间，在按钮中用class 调用CSS格式。本例在<head>与</head>之间的CSS代码是这样的：
<style type="text/css">

</style>
　　本例按钮的代码如下：
<input type="submit" name="Submit" value="提交" class="style1">
　　从上面的代码中可看到，当鼠标移到按钮上，也就是onmuseover事件发生，那么按钮将采用style2甩定义的外观样式；当鼠标移开按钮时，也就是onmuseout事件发生，那么按钮就采用style1所定义的外观样式，从而实现了动态变化的目的。后面那个class="style1"的作用是当onmouseover、onmouseout这两个事件都没发生时，采用style1所定义的外观样式，从而保持了按钮外观的一致性。

　　二、动态变换图像按钮
鼠标不在按钮上
鼠标在按钮上

本例与上例在制作思路和制作方法上均没有多大区别，只是采用了两张图片来作按钮背景，但产生的效果却非同一般。在制作这种效果的按钮时要注意两点：
　　1、作按钮背景的图片最好用具透明背景的gif图片，这样可以做出各种各样形状的按钮，将具有很强的个性；
　　2、背景图片的大小要与按钮的大小一致，否则，由于背景的平铺填充，将使按钮面目全非。
　　下面是本例在<head>与</head>之间的CSS代码：
<style type="text/css">

</style>
　　本例的按钮代码如下：
<input type="submit" name="Submit2" value="提交" class="style3">
　　从按钮代码可看出它与例一的按钮代码完全相同，但本例的CSS代码与例一有较大的区别，这里要注意：url后面的括号中是按钮背景图片的地址，也就是含路径的图片文件名，你在实际制作时要把它改成图片的实际地址。
　　另外再多讲一句，你若是用图形化网页制作工具（如Dreamweaver)，那么凡是用CSS产生的效果，一般在编辑窗中是看不到的，如本文的按钮效果，只有在预览时才能看到，在编辑窗口中看到的仍是表单默认的那种样子。