原文地址：Rediscovering the Button Element
翻译整理：西米CC
对一个设计者而言，创建良好的用户界面一直是件比较费力的事情，尤其网站应用程序的开发，由于不同浏览器在外观渲染上的差异，加之操作系统的不同，使得这个任务更加艰巨。在视觉设计方面，表单元素是难以应付的对象之一，下面我们就来看看经常使用到的“按钮”。
提交类型的表单在不论在FF、IE还是Safari都显得有点不太美观，而每次为了美化按钮去打开Photoshop设计图片，未免让我们觉得太乏味了。我们所需要的一种更好的方法，让设计师能更灵活的设计表单外观，下面我们就从<button>元素开始，来看一种比较简单的实现方法。
Inputs vs Buttons
提交按钮的标准HTML代码如下：
在三种浏览器中，按钮的外观效果如下：
下面则是使用botton标签创建提交表单的代码：
浏览器解析效果如下：
这两种编写方式所实现的功能是一致的，但是在实现提交表单时，我们可以关闭它们本身的功能，而通过[color=Maroon]accesskey定义链接访问快捷键或使用tabindex实现回车键触发“提交”按钮事件等方式来替代。但是button标签最让我们心动的地方是，我们可以在标签中添加如图像之类有效的HTML元素，并让浏览器正确解析显示效果，比如下面这段代码：
最终的显示效果为：
事实上，依据W3C规范，这些特殊的视觉修饰正是我们使用button标签的真正原因。使用BUTTON标签创建的按钮在功能上与INPUT型按钮时一样的，但是它提供了更多的渲染属性，最主要的就是BUTTON元素可以包含内容。简而言之，一个包含图片的BOTTON和一个图片型INPUT作用是一样的，但是BOTTON中的图片实质上不仅仅是“外观”的层次，而是与“Submit”等文本一样，也是作为一种“内容”存在的。