原文:How to Create an HTML Button That Acts Like a Link

有时你可能希望使用按钮链接到另一个页面或网站,而不是提交表单或类似的东西。这很简单,可以通过多种方式实现。

如何使用 a 标签中和 button 标签创建 HTML 按钮

一种方法是简单地将 <button> 标签包装在<a> 中:

<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>

这会将你的整个按钮转换为链接。

如何使用 CSS 将链接变成按钮

第二种方法是像通常使用 <a> 标签一样创建链接,然后通过 CSS 设置样式:

<a href='https://www.freecodecamp.org/'>Link To freeCodeCamp</a>

在你创建了链接之后,你可以使用 CSS 使它看起来像一个按钮。例如,你可以给它添加一个边框、背景颜色以及一些用户在悬停链接时的样式。

你可以在这里阅读了解更多关于用 CSS 设计链接的样式

如何使用 HTML 在表单中放置一个按钮

另一种添加按钮的方法是将一个 input 放在 form 标签里。在表单的 action 属性中指定所需的目标 URL。

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

希望这篇文章对你有帮助。祝你编程愉快!