制作一个 <button> 作为 HTML 中的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3341011/
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
Making a <button> that's a link in HTML
提问by AKor
Basically, I like the way that <input type="submit">is styled, with the clickable button when you add a little CSS. However, regular buttons are not styled as such, they have no such clickability without some major CSS or JS, and you have to use images.
基本上，我喜欢这种<input type="submit">样式，当您添加一点 CSS 时带有可点击的按钮。但是，常规按钮没有这样的样式，如果没有一些主要的 CSS 或 JS，它们就没有这种可点击性，并且您必须使用图像。
I made submit buttons into links, by using the form action, but this requires me to make a new form for each button. How can I find a happy medium? Using multiple forms is causing problems in my styling that I can't seem to fix unless I find another way to make buttons that are links in HTML, that have a default style that makes them have a pressed state (and I don't mean browser default settings).
我通过使用表单操作将提交按钮制作成链接，但这需要我为每个按钮制作一个新表单。我怎样才能找到一个快乐的媒介？使用多个表单会导致我的样式出现问题，我似乎无法解决这些问题，除非我找到另一种方法来制作 HTML 中的链接的按钮，该按钮具有使它们具有按下状态的默认样式（我不是说浏览器默认设置）。
Any ideas?
有任何想法吗？
回答by edeverett
<a href="#"><button>Link Text</button></a>
You asked for a link that looks like a button, so use a link and a button :-) This will preserve default browser button styling. The button by itself does nothing, but clicking it activates its parent link.
你要求一个看起来像按钮的链接，所以使用一个链接和一个按钮 :-) 这将保留默认的浏览器按钮样式。该按钮本身什么都不做，但单击它会激活其父链接。
Demo:
演示：
<a href="http://stackoverflow.com"><button>Link Text</button></a>回答by joby-flick
IMPORTANT:
<button>should never be a descendent of<a>.
重要提示：
<button>永远不应该是<a>.
Try <a href="http://stackoverflow.com"><button>Link Text</button></a>in any html validator like https://validator.w3.organd you'll get an error. There's really no point in using a button if you're notusing the button. Just style the <a>with css to look like a button. If you're using a framework like Bootstrap, you could apply the button style(s) btn, btn-primaryetc.
尝试<a href="http://stackoverflow.com"><button>Link Text</button></a>使用任何 html 验证器，如https://validator.w3.org，你会得到一个错误。如果你不使用按钮，那么使用按钮真的没有意义。只需将<a>带有 css 的样式设置为看起来像一个按钮。如果你使用像引导一个框架，你可以申请的按钮样式（S） btn，btn-primary等等。
jsfiddle : button styled link
jsfiddle：按钮样式的链接
.btnStack {
font-family: Oswald;
background-color: orange;
color: white;
text-decoration: none;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
a.btnStack:hover {
background-color: #000;
}<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<a href="http://stackoverflow.com" class="btnStack">stackoverflow.com</a>回答by Freeranger
Use javascript:
使用 JavaScript：
<button onclick="window.location.href='/css_page.html'">CSS page</button>
You can always style the button in css anyaways. Hope it helped!
您始终可以在 css 中设置按钮样式。希望有帮助！
Good luck!
祝你好运！
回答by thomasrutter
You have three options:
您有三个选择：
Style links to look like buttons using CSS.
Just look at the light blue "tags" under your question.
It is possible, even to give them a depressed appearance when clicked (using pseudo-classes like :active), without any scripting. Lots of major sites, such as Google, are starting to make buttons out of CSS styles these days anyway, scripting or not.
Put a separate <form> element around each one.
As you mentioned in the question. Easy and will definitely work without Javascript (or even CSS). But it adds a little extra code which may look untidy.
Rely on Javascript.
Which is what you said you didn't want to do.
样式链接看起来像使用 CSS 的按钮。
只需查看问题下方的浅蓝色“标签”即可。
在没有任何脚本的情况下，甚至可以在单击时给它们一个沮丧的外观（使用像 :active 这样的伪类）。无论如何，许多主要网站，例如 Google，现在都开始使用 CSS 样式制作按钮，无论是否编写脚本。
在每个元素周围放置一个单独的 <form> 元素。
正如你在问题中提到的。很简单，不用 Javascript（甚至 CSS）也能工作。但它添加了一些可能看起来不整洁的额外代码。
依靠Javascript。
这是你说你不想做的。
回答by Jared
A little bit easier and it looks exactly like the button in the form. Just use the input and wrap the anchor tag around it.
稍微简单一点，它看起来就像表单中的按钮。只需使用输入并将锚标记包裹在其周围即可。
<a href="#"><input type="button" value="Button Text"></a>
回答by Nithya
<a id="reset-authenticator" asp-page="./ResetAuthenticator"><input type="button" class="btn btn-primary" value="Reset app" /></a>回答by Nealv
The 3 easiest ways IMHO are
恕我直言，最简单的 3 种方法是
1: you create an image of a button and put a href around it. (Not a good way, you lose flexibility and will provide a lot of difficulties and problems.)
1：你创建一个按钮的图像并在它周围放置一个href。（不是一个好方法，你失去了灵活性，会提供很多困难和问题。）
2 (The easiest one) -> JQuery
2（最简单的一个）-> JQuery
<input type="submit" someattribute="http://yoururl/index.php">
$('button[type=submit] .default').click(function(){
window.location = $(this).attr("someattribute");
return false; //otherwise it will send a button submit to the server
});
3 (also easy but I prefer previous one):
3（也很简单，但我更喜欢前一个）：
<INPUT TYPE=BUTTON OnClick="somefunction("http://yoururl");return false" VALUE="somevalue">
$fn.somefunction= function(url) {
window.location = url;
};
