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

我有一个表单,其中有一个"提交"按钮和一个"取消"锚点.HTML是这样的:

Cancel

我希望两个人看起来和行为一样.没什么好看的,只是类似于"Ask Question"锚点在StackOverflow上看起来的样子.

我可以让两个看起来有点相似,包括边界框,背景颜色和悬停背景颜色,但我不能完全获得高度和垂直对齐以便彼此玩得很好.我发布了我的CSS但是现在这样一团糟,我认为从头开始可能更容易,让准系统的CSS布局工作,然后继续前进.

PS我知道我可以使用an而不是锚点并挂钩onClick事件来进行重定向.现在,使用锚来解决这个问题几乎是一个原则问题(此外还要考虑网络蜘蛛的考虑因素).

1> bobince..：

---

使用简单样式可以获得的最佳效果如下:

.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功能,但并未在任何地方支持.特别是IE和Opera会忽略它.但是,如果您将其他样式作为备份包含在内,那么支持的浏览器会appearance删除该属性,而更喜欢显式背景和边框!

你可能会做的是appearance默认使用上面的样式,并根据需要进行JavaScript修复,例如:

2> 小智..：

---

我希望这将有所帮助.

SomeText

---

这甚至不是有效的HTML.它有18个赞成票吗？

---

http://stackoverflow.com/questions/802839/button-inside-of-anchor-link-works-in-firefox-but-not-in-internet-explorer

3> Muddasir Abb..：

---

我建议您同时使用“输入提交/按钮”而不是锚点，并将这行代码onClick="javascript:location.href = 'http://stackoverflow.com';" 放在要用作链接的“输入提交/按钮”中。

提交范例

按钮示例

Submit