原因之一：1个象素的边界
用BUTTON，我们所想要的1个象素的边界也能出现很好的效果，这样就是真正的Windows的按钮外观了。
原因之二：“按下的”视觉效果更好
一个真正的“按下的”按钮的外观所包含的不仅仅是一个inset（陷入）的边界，而且整个元素还要有一个轻微的偏移量（右下）。BUTTON元素在默认状态提供了这种功能。
原因之三：更好的默认格式
一个BUTTON的默认颜色是buttonface，其中包含的HTML排列在中间，水平和垂直均对齐。
点击这里看一下效果。
要创建以上这个基于BUTTON的工具栏，我们使用下面的HTML和脚本：
< HTML>
< HEAD>
< STYLE TYPE="text/css">
.but {
border:1px buttonface solid;
font-family:MS Sans Serif;font-size:8pt;
}
< /STYLE>
.
.
.
< /HEAD>
< BODY>
.
.
.
< DIV ID="toolbar"
STYLE="width:250;background-color:buttonface;
padding-top:1px;padding-left:2px;">
< BUTTON CLASS=but STYLE="width:32"
onClick="yourFileFunction()">File< /BUTTON>< BUTTON
CLASS=but STYLE="width:34"
onClick="yourEditFunction()">Edit< /BUTTON>< BUTTON
CLASS=but STYLE="width:39"
onClick="yourViewFunction()">View< /BUTTON>< BUTTON
CLASS=but STYLE="width:59"
onClick="yourFavoritesFunction()">Favorites< /BUTTON>< BUTTON
CLASS=but STYLE="width:42"
onClick="yourToolsFunction()">Tools< /BUTTON>< BUTTON
CLASS=but STYLE="width:36"
onClick="yourHelpFunction()">Help< /BUTTON>
< /DIV>
.
.
.
< SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
allBUTs = toolbar.children;
for (i=0;i< allBUTs.length;i++) {
tSpan = allBUTs(i);
tSpan.onselectstart = function(){return false}
tSpan.onmouseover = function(){
this.style.border = "1px buttonhighlight outset";
}
tSpan.onmouseout = function(){
this.style.border = "1px buttonface solid";
}
tSpan.onmousedown = function(){
this.style.border = "1px buttonhighlight inset";
}
tSpan.onmouseup = function(){
this.style.border = "1px buttonhighlight outset";
window.focus();
}
}
< /SCRIPT>>
< /BODY>
< /HTML>
在STYLE 中，我们忽略了 BUTTON 的默认边界，创建了无形边界。我们还定义了使用的字体，因为BUTTON不象SPAN，Explorer将其认为是“控件”，不从其母元素那里继承任何格式。
HTML和脚本的剩余部分同SPAN元素的一样。但是在onmouseup处理器中增加了一个Window.focus()语句，这对于保持一个“清洁”的外观是必要的。当一个BUTTON（按钮）被点击时，它保持在点亮状态，并用虚线分布在Explorer轮廓上。通过将focus（焦点）转换到window，就象是点击BUTTON（按钮）的外部一样，将加亮取消了。请试一试：
文章来源于领测软件测试网 https://www.ltesting.net/
