如何创建可作为链接使用的HTML按钮？

下面是几种实用的实现方案，你可以根据需求选择：

方法1：用<a>标签包裹<button>元素 #

这是最直观的方式，直接把按钮嵌套在链接标签里，点击按钮就会触发链接跳转：

<a href="/目标页面地址">
  <button>点击跳转</button>
</a>

你可以通过CSS给按钮自定义样式，比如修改颜色、圆角、内边距等，适配你的页面风格。

方法2：给<button>添加点击事件实现跳转 #

如果需要在跳转前执行一些JavaScript逻辑，这种方式更灵活：

<button onclick="window.location.href='/目标页面地址'">点击跳转</button>

比如可以在跳转前验证表单、提示用户等，再执行跳转操作。

方法3：用CSS将<a>标签样式改为按钮 #

这种方式语义化更好（本身就是链接），同时视觉上呈现按钮效果：

<a href="/目标页面地址" class="button-link">点击跳转</a>

<style>
.button-link {
  display: inline-block;
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
}
.button-link:hover {
  background-color: #0056b3;
}
</style>

这种方案不需要额外的按钮元素，纯靠CSS实现按钮样式，适合注重语义化的场景。

内容的提问来源于stack exchange，提问作者ajayvutti