图片按钮是我们经常应用的网页元素,按钮的生成有两种方法,一个是用链接<a>来模拟按钮,一个是用现成的表单按钮。
<input id="searchbutton" type="submit" class="inputbutton" name="submit1" value="搜索" />
我觉得“表单按钮”比用“链接按钮”要好,更符合标准的语义化。而且“表单按钮”天然就具有按下动态效果,不需要额外增加代码。
按钮的CSS 美化方法,无论是“链接按钮”还是“表单按钮”,一般都是用背景图来美化。设好按钮宽度值,清除按钮边框值,找个满意的按钮图片做为背景图即可。
width: 50px;
height: 30px;
border: none;
font-size: 12px;
color: black;
cursor: hand;
background: url(../images/searchbutton.jpg) no-repeat left top;
网上还流传一篇“CSS实现的几个非常漂亮的按钮”的文章,没有用到背景图,而是用CSS 滤镜实现的,但在Firefox中就会失效,露出难看的灰色底色,兼容性比较差,不推荐。
此外,如果仅需要按下按钮网页跳转的效果,而不需提交表单的话,用“链接按钮”比较好,非要用“表单按钮”实现的话,给按钮增加一个onclick 事件即可。
本文感谢内裤的提示。