HTML按鈕 - 最佳實踐

假設您有一個託管在Web服務器上的面向客戶的應用程序。您無法控制或不瞭解客戶的客戶。你也需要一個吸引人的設計，但你不想用沉重的圖形和/或突兀的JavaScript壓倒用戶。HTML按鈕 - 最佳實踐

你已經有了一個很好的CSS佈局，rounded corners但默認的灰色按鈕突出像一個拇指痛。

我可以在因特網上搜索例如this的例子，但是我看不出有什麼能幫助我確定給定的解決方案是否合適，或者是否存在更好的解決方案。

考慮到這一點，在HTML中創建有吸引力/可用按鈕的最佳建議是什麼？在各種瀏覽器/平臺中工作或至少降級優雅？

來源

2010-09-22 Mayo

jQuery UI的按鈕

我建議你看一看jQuery UI的按鈕，因爲它是最流行的HTML按鈕替換之一在那裏。既然你已經在使用jQuery，這應該是一個不錯的選擇。

jQuery UI的是

了廣泛的試驗
跨瀏覽器兼容
優化
高度可定製的，用的ThemeRoller服務

鏈接

來源

2010-09-22 14:14:54

HTML提供可點擊的圖像按鈕。嘗試<input type="image" src="..." />。

來源

2010-09-22 14:16:02 meagar

這是我用於動態提交按鈕。沒有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

來源

2010-09-22 17:03:30 Baijs

實例？截圖？ – 2010-09-22 17:05:43

HTML按鈕 - 最佳實踐

回答

相關問題