Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.
The Button Element – W3C
因此我们要为此寻找一个设计方案，好在拥有海量资料的互联网可以为我们提供一些有用的帮助来解决这个问题。这的确很方便，但是不幸的是很设计者和网站开发者甚至都不知道这个元素的存在。在我决定用button元素替换掉Wufoo（本文作者的一款网络产品，dudo注）前，我得肯定这个标签和CSS能满足以下的需求：
需求条件：
1、他们必须具有按钮的外观
2、在不同浏览器中有相同的表现样式
3、button中所应用的样式同样可以在超级链接上使用（因为Wufoo中的交互总是使用表单提交的方式和链接触发Ajax的方式中的某一个实现的，他们可能经常会紧挨在一起，因此我需要他们具有相同的表现样式）
4、在不同的情况下标签能够表现灵活，易于修改
5、对于信息传递过程中发生的事件能够用图标和颜色有效地区分
面对上面的问题，我首先写出一些CSS来，然后再解决跨浏览器的问题。接下来我们就会看到：
最终结果
这并没有什么大惊小怪的，他很简单，但是却非常的有效。我之所以喜欢用这种方式和处理按钮是因为我不必为创建10000个图标而去启动Photoshop一一创建。如果我们仔细观察一下代码，你就会发现后面两个按钮其实是两个链接。
<div class="buttons">
<button type="submit" class="positive">
<img src="/images/icons/tick.png" alt=""/>
Save
</button>
<a href="/password/reset/">
<img src="/images/icons/textfield_key.png" alt=""/>
Change Password
</a>
<a href="#" class="negative">
<img src="/images/icons/cross.png" alt=""/>
Cancel
</a>
</div>
这样做的目的是因为在网页应用程序中很多动作都是事件（REST）驱动的，因此通过一个特定的URL发送用户请求可以把这些动作初始化。使用在两种元素上都可以应用的样式，使我们在维持Ajax和标准提交按钮引起的交互时的样式统一手段更加灵活。
现在你可能会问，为什么我要把图像元素的alt属性留成空白呢？alt是img元素的必要属性，它用于解释图像的内容，而这里却没有图像的相关说明，这的确有点费解。不过，与“缺少”属性不同，属性值“为空”是完全符合标准的，他告诉浏览器这些图像代表了一些完全可以忽略的信息，这也使浏览者不用因为提示信息的遮挡而找不到下一个按钮。由于此处的图标完全是多余的，因此我们宁愿不去浪费用户的时间去查看这个完全是为了实现界面风格统一而使用的图标。
