HTML按钮 - 最佳实践

Question

假设您在Web服务器上托管了一个面向客户的应用程序。您无法控制或了解客户端。您还希望拥有吸引人的设计，但不想用沉重的图形和/或令人讨厌的JavaScript来压倒用户。

您已经有了一个漂亮的CSS布局，并且圆角，但是默认的灰色按钮非常突兀。

我可以在互联网上搜索类似这个的示例，但我看不到任何有助于确定特定解决方案是否合适或是否存在更好解决方案的东西。

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

- Mayo

Answer 1

jQuery UI按钮

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

Jquery UI具有以下特点：

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

链接

• http://jqueryui.com/demos/button/
• http://msdn.microsoft.com/en-us/scriptjunkie/ff756526.aspx

- Pramendra Gupta

Answer 2

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

- user229044

Answer 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

- Baijs