在 HTML/CSS 按钮中实现链接答案

【问题标题】：Implementing link into HTML/CSS button在 HTML/CSS 按钮中实现链接
【发布时间】：2012-12-21 12:00:11
【问题描述】：

我需要在这些按钮中添加一个链接：

<div class="buttons">
      <button class="action bluebtn"><span class="label">CREATE NEW ACCOUNT</span></button>
      <button class="action redbtn"><span class="label">EDIT ACCOUNT</span></button>
      <button class="action greenbtn"><span class="label">IMPORT EDI TEXT FILES</span></button>
      <button class="action"><span class="label">LOG OUT</span></button>
    </div>

谁能帮帮我？

【问题讨论】：

您需要在按钮中添加一个链接是什么意思...指向什么的链接？
指向另一个页面的超链接。
试试这个 SO Answer stackoverflow.com/a/2906586/96505中的解决方案
您不只是使用 href 元素并将其样式化为使用 CSS 的按钮，是否有特定原因？
看看这个sample

标签： html css button hyperlink

【解决方案1】：

这里有几个选项，取决于是否可以更改 HTML：

如果您可以更改 HTML 将按钮变成普通的<a href="http://www....">link</a> 或者你可以添加一个 onclick 事件：

<button class="action bluebtn" onclick="javascript:document.location='some-url'">
    <span class="label">CREATE NEW ACCOUNT</span>
</button>

如果您无法更改 HTML，请使用 jQuery 之类的工具获取按钮并在其中添加 onclick 事件：

$("button.bluebtn").click(function(){
    document.location = 'some-url';
    return false;
});

但如果可以的话，我确实建议将按钮更改为常规链接。将<button> 元素用作链接毫无意义...

【讨论】：

让它们成为锚点并像按钮一样设计它们是击败 imo
@rlemon，你说得对，我还在忙着添加那部分 ;)

【解决方案2】：

如果你真的需要使用<button>标签，你可以添加Javascript的链接：

<button onclick="location.href='url_address'">Your HTML content</button>

我认为使用<a> 标签而不是<button> 的想法会更一致，然后使用CSS 将它们设置为看起来像按钮。这样，您就可以依赖标记的默认行为，而不必使用 Javascript。

【讨论】：

【解决方案3】：

<input type="button" value="click for google" onClick="window.location='http://w ww.google.com' ">

或者你可以使用

<button onclick="document.location.href='link'; return false;">Link Text</button>

【讨论】：

【解决方案4】：

我认为你只是用一个 href 元素来包装按钮，如下所示：

<div class="buttons">
  <a href="your link here"><button class="action bluebtn"><span class="label">CREATE NEW ACCOUNT</span></button></a>
</div>

并对其余按钮执行相同操作。用“a href”标签包裹它们。

【讨论】：