Question

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

你有一个很好的CSS布局rounded corners，但默认的灰色按钮突然像拇指一样疼痛。

我可以在互联网上搜索像this这样的例子，但是我没有看到任何可以帮助我确定给定解决方案是否合适或是否存在更好的解决方案的内容。

考虑到这一点，您在HTML中创建有吸引力/可用按钮的最佳建议是什么？这些按钮在各种浏览器/平台之间有效或至少降级？

Answer 1

jQuery UI按钮

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

Jquery UI

经过广泛测试
跨浏览器兼容
优化
使用ThemeRoller服务进行高度自定义

<强>链接

Answer 2

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

Answer 3

这是我用于动态提交按钮的内容。没有javascript及其crossbrowser。

<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

HTML按钮 - 最佳实践

3 个答案: