网页图片按钮的生成与美化

图片按钮是我们经常应用的网页元素，按钮的生成有两种方法，一个是用链接<a>来模拟按钮，一个是用现成的表单按钮。

<input id="searchbutton" type="submit" class="inputbutton" name="submit1" value="搜索" />

我觉得“表单按钮”比用“链接按钮”要好，更符合标准的语义化。而且“表单按钮”天然就具有按下动态效果，不需要额外增加代码。

按钮的CSS 美化方法，无论是“链接按钮”还是“表单按钮”，一般都是用背景图来美化。设好按钮宽度值，清除按钮边框值，找个满意的按钮图片bg.gif做为背景图即可。

width: 50px;
height: 30px;
border: none;
font-size: 12px; 
color: black; 
cursor: hand; 
background: url(bg.gif) no-repeat left top;

网上还流传一篇“CSS实现的几个非常漂亮的按钮”的文章，没有用到背景图，而是用CSS 滤镜实现的，但在Firefox中就会失效，露出难看的灰色底色，兼容性比较差，不推荐。

此外，如果仅需要按下按钮网页跳转的效果，而不需提交表单的话，用“链接按钮”比较好，非要用“表单按钮”实现的话，给按钮增加一个onclick 事件即可。