HTML 按钮 - 最佳实践 [关闭]答案

【问题标题】：HTML Buttons - Best Practices [closed]HTML 按钮 - 最佳实践 [关闭]
【发布时间】：2010-09-22 14:10:55
【问题描述】：

假设您在 Web 服务器上托管了一个面向客户的应用程序。您无法控制或了解客户的客户。您还想要一个吸引人的设计，但又不想用繁重的图形和/或突兀的 JavaScript 让用户不知所措。

rounded corners 的 CSS 布局不错，但默认的灰色按钮显得很突兀。

我可以在 Internet 上搜索 this 之类的示例，但我没有看到任何信息可以帮助我确定给定解决方案是否合适或是否存在更好的解决方案。

考虑到这一点，对于在 HTML 中创建有吸引力/可用的按钮，这些按钮可以在各种浏览器/平台中正常工作或至少可以正常降级，您有哪些主要建议？

【问题讨论】：

标签： html css button usability

【解决方案1】：

jQuery UI 按钮

我建议你看看 jQuery UI 按钮，因为它是最流行的 HTML 按钮替代品之一。由于您已经在使用 jQuery，这应该是一个不错的选择。

Jquery UI 是

经过广泛测试
跨浏览器兼容
优化
高度可定制，使用 ThemeRoller 服务

链接

【讨论】：

【解决方案2】：

HTML 提供可点击的图像按钮。试试<input type="image" src="..." />。

【讨论】：

【解决方案3】：

这是我用于动态提交按钮的。没有 javascript 及其跨浏览器。

<button class="form-submit" type="submit"><span>Inloggen</span></button>

CSS：

.form-submit { clear: both; float:none; height:30px; color: #fff; overflow: visible; background: #fff url(../images/design/bg-buttons.png) no-repeat 100% 0; border:0 none; clear: both; cursor:pointer;  font:bold 12px arial; padding:0 10px 0 0; margin:15px 0 0; text-align:center; }
.form-submit span { padding:0; border:0; height:30px; background: #fff url(../images/design/bg-buttons.png) no-repeat 0 0; display:block; white-space:nowrap; padding:0 0 0 10px; text-shadow: 1px 1px 3px #000; line-height:30px; }
.form-submit::-moz-focus-inner { border:0 none; padding:0; }
.form-submit:hover { color: #ff0000;  background-position: 100% -30px;}
.form-submit:hover span{ background-position: 0 -30px; text-shadow: none;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .form-submit span { position: relative; margin: -1px 0 0; left: -3px; }
}

CSS ie6

.form-submit span {  margin: 0 0 -1px; }
.form-submit.hover {  color: #ff0000; background-position: 100% -30px;}
.form-submit.hover span{ background-position: 0 -30px;}

可以在这里看到示例（登录按钮）

http://www.oudstanding.nl/user/login

【讨论】：