Html 将锚标记样式化为看起来像提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2187008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling an anchor tag to look like a submit button
提问by Kevin Pang
I have a form where there's a "Submit" button and a "Cancel" anchor. The HTML is this:
我有一个表单，其中有一个“提交”按钮和一个“取消”锚点。HTML是这样的：
<input type="submit" value="Submit" />
<a href="some_url">Cancel</a>
I'd like for the two to look and act the same. Nothing fancy, just something similar to how the "Ask Question" anchor looks on StackOverflow.
我希望两个人看起来和行为都一样。没什么特别的，只是类似于 StackOverflow 上“提问”锚点的样子。
I can get the two to look somewhat similar, with the bounding box, background color, and hover background color, but I can't quite get the height and vertical alignment to play nice with one another. I'd post my CSS but it's such a mess at this point that I think it might be easier to just start from scratch, get a barebones CSS layout working, then move on from there.
我可以让两者看起来有些相似，边界框、背景颜色和悬停背景颜色，但我不能完全让高度和垂直对齐相互配合。我会发布我的 CSS，但此时它是如此混乱，我认为从头开始可能更容易，让准系统 CSS 布局工作，然后从那里继续。
P.S. I know I could use an instead of an anchor and hook up the onClick event to do the redirect. It's almost a matter of principle at this point now to get this right using an anchor (plus there are web spider considerations to take into consideration here).
PS 我知道我可以使用一个而不是锚点并连接 onClick 事件来进行重定向。在这一点上，使用锚点来正确处理这几乎是一个原则问题（此外，这里还需要考虑网络蜘蛛的注意事项）。
回答by bobince
The best you can get with simple styles would be something like:
使用简单样式可以获得的最佳效果如下：
.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;
}
(Possibly with some kind of fix to stop IE6-IE7 treating focused buttons as being ‘active'.)
（可能通过某种修复来阻止 IE6-IE7 将聚焦按钮视为“活动”。）
This won't necessarily look exactly like the buttons on the native desktop, though; indeed, for many desktop themes it won't be possible to reproduce the look of a button in simple CSS.
不过，这不一定与本机桌面上的按钮完全一样；实际上，对于许多桌面主题，不可能在简单的 CSS 中重现按钮的外观。
However, you can ask the browser to use native rendering, which is best of all:
但是，您可以要求浏览器使用本机渲染，这是最好的：
.likeabutton {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none; font: menu; color: ButtonText;
display: inline-block; padding: 2px 8px;
}
Unfortunately, as you may have guessed from the browser-specific prefixes, this is a CSS3 featurethat isn't suppoorted everywhere yet. In particular IE and Opera will ignore it. But if you include the other styles as backup, the browsers that do support appearancedrop that property, preferring the explicit backgrounds and borders!
不幸的是，您可能已经从浏览器特定的前缀中猜到了，这是一个尚未在所有地方都得到支持的CSS3 功能。特别是 IE 和 Opera 会忽略它。但是，如果您包含其他样式作为备份，则支持的浏览器会appearance删除该属性，而更喜欢显式的背景和边框！
What you might do is use the appearancestyles as above by default, and do JavaScript fixups as necessary, eg.:
您可以做的是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>
回答by user3233348
I hope this will help.
我希望这将有所帮助。
<a href="url"><button>SomeText</button></a>
回答by Muddasir Abbas
I Suggest you to use both Input Submit / Button instead of anchor and put this line of code onClick="javascript:location.href = 'http://stackoverflow.com';"
in that Input Submit / Button which you want to work as link.
我建议您同时使用 Input Submit / Button 而不是 anchor 并将这行代码onClick="javascript:location.href = 'http://stackoverflow.com';"
放在您想要用作链接的 Input Submit / Button 中。
Submit Example
提交示例
<input type="submit" value="Submit" onClick="javascript:location.href = 'some_url';" />
Button Example
按钮示例
<button type="button" onClick="javascript:location.href = 'some_url';" />Submit</button>
回答by raphaelb
Using a button tag instead of the input, resetting it and put a span inside, you'll then just have to style both the link and the span in the same way. It involve extra markup, but it worked for me.
使用按钮标签而不是输入，重置它并在其中放置一个跨度，然后您只需以相同的方式设置链接和跨度的样式。它涉及额外的标记，但它对我有用。
the markup:
标记：
<button type="submit">
<span>submit</span>
</button>
<a>cancel</a>
the css:
css：
button[type="submit"] {
display: inline;
border: none;
padding: 0;
background: none;
}
回答by jiten jethva
Using CSS:
使用 CSS：
.button {
display: block;
width: 115px;
height: 25px;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
}
<a href="some_url" class="button ">Cancel</a>
回答by D.Madhushan
HTML
HTML
<a href="#" class="button"> HOME </a>
CSS
CSS
.button {
background-color: #00CCFF;
padding: 8px 16px;
display: inline-block;
text-decoration: none;
color: #FFFFFF;
border-radius: 3px;
}
.button:hover{ background-color: #0066FF;}
回答by graphicdivine
Links and inputs are very different things, used for very different purposes. Looks to me like you need a buttonfor the cancel:
链接和输入是非常不同的东西，用于非常不同的目的。在我看来，您需要一个取消按钮：
<button>Cancel</button>
Or maybe an input:
或者也许是一个输入：
<input type="button" value="Cancel"/>
回答by Joel Etherton
Why not just use a button and call the url with JavaScript?
为什么不直接使用按钮并使用 JavaScript 调用 url？
<input type="button" value="Cancel" onclick="location.href='url.html';return false;" />
回答by Alex LE
Style your change the Submit button to an anchor tag instead and submit using javascript:
将您的更改提交按钮设置为锚标记，然后使用 javascript 提交：
<a class="link-button" href="javascript:submit();">Submit</a>
<a class="link-button" href="some_url">Cancel</a>
function submit() {
var form = document.getElementById("form_id");
form.submit();
}
回答by rsmoorthy
How about
怎么样
<a href="url"><input type="button" value="Cancel"></a>
