原文： HTML Button Link Code Examples – How to Make HTML Hyperlinks Using the HREF Attribute on Tags
在这篇文章中，我们将探讨三种不同的方法，使 HTML 按钮像链接一样运行。
这些是我们要讨论的方法：
- 为链接设置样式，使它看起来像一个按钮
- 使用表单中的 action 和 formaction 属性
- 使用 JavaScript 的 onclick 事件
但首先，让我们看一下错误的方法。
为什么使用 a 元素的方法不起作用
当下面的代码片段被点击时，会跳转到 freeCodeCamp 网站。
<a href="https://www.freecodecamp.org/">
<button>freeCodeCamp</button>
</a> 然而，这并不是有效的 HTML。
a 元素可以包裹整个段落、列表、表格等，甚至整个章节，只要其中没有互动内容（如按钮或其他链接）。（来源：网络超文本应用技术工作组）
这被认为是不好的做法，因为它使用户的意图不明确。
链接应该是为用户导航到网页的另一部分或外部网站，而按钮应该是执行一个特定的动作，比如提交一个表单。
当你把一个嵌套在另一个里面时，就会让人搞不清楚你想执行什么动作。这就是为什么最好不要将一个按钮嵌套在一个锚标签内。
如何用 CSS 将一个链接设置成按钮的样子
这第一种方法根本没有使用按钮。我们可以用 CSS 设置锚点标签的样式，使其看起来像一个按钮。
这是锚点标签的默认 HTML 样式。
我们可以给锚点标签添加一个类，然后使用该类选择器来为该元素设置样式。
<a class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>
如果你想让这个链接打开一个新的页面，你可以像这样添加 target="_blank" 属性。
<a target="_blank" class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>
然后，我们可以添加一个背景色，改变字体颜色，像这样:
.fcc-btn {
background-color: #199319;
color: white;
}
下一步是在文本周围添加一些填充：
.fcc-btn {
background-color: #199319;
color: white;
padding: 15px 25px;
}
最后，我们可以使用 text-decoration 属性从文本中删除下划线：
.fcc-btn {
background-color: #199319;
color: white;
padding: 15px 25px;
text-decoration: none;
}
现在，我们有了一个看起来像按钮的锚标签。
我们还可以根据链接的状态改变背景颜色，使这个“按钮”更具互动性。
.fcc-btn:hover {
background-color: #223094;
}我们可以进行更复杂的设计，但这只是向你展示像按钮一样的链接的基本样式。
你也可以选择使用像 Bootstrap 这样的 CSS 库。
<a class="btn btn-primary" href="https://www.freecodecamp.org/">freeCodeCamp</a>
如果你的项目已经包括 Bootstrap，那么你可以使用内置的按钮样式。但我不会为了给一个链接样式而导入 Bootstrap。
这种做法有什么问题？
对于将链接样式化为按钮是否是好的做法，存在着一些争论。有些人认为，链接应该总是看起来像链接，而按钮应该看起来像按钮。
在 Resilient Web Design 一书中，Jeremy Keith 指出
一种材料不应该被用来替代另一种材料，否则最终的结果是欺骗性的。
我为什么要费力地提出这个辩论呢？
我的目的不是要让你在辩论中选择一方而不是另一方，我只是想让你知道这个正在进行的讨论。
如何使用 action 和 formaction 属性在表单中制作一个按钮
如何使用 action 属性
另一种方法是将按钮嵌套在表单中并使用 action 属性。
输入的例子：
<form action="https://www.freecodecamp.org/">
<input type="submit" value="freeCodeCamp">
</form>按钮的例子：
<form action="https://www.freecodecamp.org/">
<button type="submit">freeCodeCamp</button>
</form>这将是默认的按钮样式。
我们可以使用与前面相同的样式，但我们必须添加 cursor 为 pointer，并将边框设置为 none，像这样：
.fcc-btn {
background-color: #199319;
color: white;
padding: 15px 25px;
text-decoration: none;
cursor: pointer;
border: none;
}
如何使用 formaction 属性
与前面的方法类似，我们可以创建一个表单并使用 formaction 属性。
输入的例子：
<form>
<input type="submit" formaction="https://www.freecodecamp.org/" value="freeCodeCamp">
</form>按钮的例子：
<form>
<button type="submit" formaction="https://www.freecodecamp.org/">freeCodeCamp</button>
</form>你只能对 type="image" 或 type="submit" 的输入和按钮使用 formaction 属性。
这在语义上是否正确？
虽然这似乎是一个可行的解决方案，但有一个问题，即这在语义上是否正确。
我们正在使用表单标签，但这并不像一个真正的表单那样运行。表单的目的是为了收集和提交用户数据。
但我们使用的是提交按钮，将用户导航到另一个页面。
当涉及到语义时，这不是一个使用表单标签的好方法。
使用 action 和 formaction 属性的副作用
当你点击按钮的时候，URL 会发生一些有趣的事情。URL 现在在它的末尾有一个问号。
这种变化的原因是表单使用的是 GET 方法。你可以改用 POST 方法，但可能在某些情况下这也是不理想的。
<form method="POST" action="https://www.freecodecamp.org/">
<button type="submit">freeCodeCamp</button>
</form>虽然这种方法是有效的 HTML，但它确实带来了这种意想不到的副作用。
如何使用 JavaScript 的 onclick 事件来制作一个按钮
在前面的方法中，我们已经看了 HTML 和 CSS 的解决方案。但我们也可以用 JavaScript 来达到同样的效果。
输入的例子：
<form>
<input type="button" onclick="window.location.href='https://www.freecodecamp.org/';" value="freeCodeCamp" />
</form>按钮的例子：
<button onclick="window.location.href='https://www.freecodecamp.org/';">freeCodeCamp</button>
location.href 代表一个特定的 URL 的位置。在这个例子中，Window.location.href 将返回 https://www.freecodecamp.org/。
这种方法的缺点
虽然这个方案确实有效，但也有一些潜在的问题需要考虑。
如果用户已经决定在他们的浏览器中禁用 JavaScript，那么显然这个解决方案将无法运行。不幸的是，这可能会导致用户体验不佳。
总结
这篇文章的目的是向你展示三种不同的方法，你可以使按钮像链接一样运行。
第一种方法是设计一个看起来像按钮的链接。我们还研究了改变链接的外观使其看起来像另一个元素是否是个好主意的问题。
第二种方法是使用表单和 formaction 属性。但我们也了解到，这种方法对 URL 有一些副作用，在语义上也不正确。
第三种方法是使用 JavaScript 的 onclick 事件和 Window.location.href。但我们也了解到，如果用户决定在他们的浏览器中禁用 JavaScript，这种方法可能会失效。
作为一个开发者，在为你的项目采纳一个特定的方法之前，看看它的优点和缺点真的很重要。
我希望你喜欢这篇文章，并在其中学到一些东西。
编码愉快！