将锚标记设置为看起来像提交按钮

我有一个表单，其中有一个“提交”按钮和一个“取消”锚点。 HTML 是这样的：

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

我希望两个人看起来和行为都一样。没什么花哨的，只是类似于 StackOverflow 上“提问”锚点的外观。

我可以让两者看起来有些相似，包括边界框、背景颜色和悬停背景颜色，但我无法完全让高度和垂直对齐方式相互配合。我本来想发布我的 CSS，但现在它太混乱了，我认为从头开始，让准系统 CSS 布局工作，然后从那里继续可能会更容易。

附：我知道我可以使用 an 代替锚点并连接 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;
}

不幸的是，正如您可能从浏览器特定的前缀中猜到的那样，这是一个CSS3特性 http://www.w3.org/TR/css3-ui/尚未在所有地方都支持。特别是 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>