定製錨標籤，使其看起來像一個提交按鈕

問題描述

我有一個表單，其中有一個”Submit” 按鈕和一個”Cancel” 錨點。 HTML 是這樣的：

<input type="submit" value="Submit" />
<a href="some_url">Cancel</a>

我想讓這兩個人看起來和行為一樣。沒什麼奇怪的，只是類似於”Ask Question” 的錨點在 StackOverflow 上看起來。

我可以得到兩個看起來有點相似，有邊框，背景顏色和懸停的背景顏色，但我不能很好地獲得高度和垂直對齊來相互玩得很好。我會發布我的 CSS，但這是一個混亂，在這一點上，我認為可能會更容易從頭開始，獲得一個準系統的 CSS 佈局工作，然後繼續從那裏。

附：我知道我可以使用一個而不是一個錨點，並連接 onClick 事件來做重定向。現在幾乎是一個原則問題，現在要使用一個錨點來獲得這個權利 (另外還有網絡蜘蛛考慮在這裏考慮) 。

最佳解決方案

你可以用簡單的風格獲得最好的東西就像：

.likeabutton {
    text-decoration: none; font: menu;
    display: inline-block; padding: 2px 8px;
    background: ButtonFace; color: ButtonText;
    border-style: solid; border-width: 2px;
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
.likeabutton:active {
    border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}

(可能有一些修復，以阻止 IE6-IE7 處理聚焦按鈕為「活動」。)

雖然這不一定看起來像本機桌面上的按鈕; 事實上，對於許多桌面主題，將無法在簡單的 CSS 中重現按鈕的外觀。

但是，您可以要求瀏覽器使用本機渲染，這是最好的：

.likeabutton {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-decoration: none; font: menu; color: ButtonText;
    display: inline-block; padding: 2px 8px;
}

不幸的是，正如你可能從 browser-specific 前綴猜到的，這是一個 CSS3 feature，並沒有被支持到處。特別是 IE 和 Opera 會忽略它。但是，如果您將其他樣式作為備份，支持 appearance 的瀏覽器會刪除該屬性，更喜歡顯式的背景和邊框！

您可以做的是默認使用 appearance 樣式，並根據需要進行 JavaScript 修復，例如：

<script type="text/javascript">
    var r= document.documentElement;
    if (!('appearance' in r || 'MozAppearance' in r || 'WebkitAppearance' in r)) {
        // add styles for background and border colours
        if (/* IE6 or IE7 */)
            // add mousedown, mouseup handlers to push the button in, if you can be bothered
        else
            // add styles for 'active' button
    }
</script>

次佳解決方案

我希望這將有所幫助。

<a href="url"><button>SomeText</button></a>

第三種解決方案

我建議您使用輸入提交/按鈕而不是錨點，並將這行代碼 onClick="javascript:location.href = 'http://stackoverflow.com';"放在您要作為鏈接工作的輸入提交/按鈕中。

提交舉例

<input type="submit" value="Submit" onClick="javascript:location.href = 'some_url';" />

按鈕示例

<button type="button" onClick="javascript:location.href = 'some_url';" />Submit</button>

參考文獻

Styling an anchor tag to look like a submit button

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

定製錨標籤，使其看起來像一個提交按鈕