定制锚标签，使其看起来像一个提交按钮

问题描述

我有一个表单，其中有一个”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 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

定制锚标签，使其看起来像一个提交按钮