如何在HTML5中创建带有跳转链接的按钮？

你原来的写法不生效是因为原生<button>标签没有href属性，这个属性是<a>标签专属的。

注意：所有跳转链接如果是外部站点，需要填写完整的协议头（如https://），否则浏览器会将其识别为当前站点下的相对路径，导致跳转异常。

以下是几种可行的实现方案：

• 方案1：用<a>标签包裹<button>（纯HTML实现，无JS依赖，最通用）
  代码示例：

  <a href="https://www.google.com">
    <button>Google</button>
  </a>
  

  如果需要在新标签页打开跳转，可给<a>标签添加target="_blank"属性。

• 方案2：给按钮绑定点击事件用JS跳转（适合跳转前需要执行额外逻辑判断的场景）
  代码示例：

  <!-- 当前页面跳转 -->
  <button onclick="window.location.href='https://www.google.com'">Google</button>
  
  <!-- 新标签页跳转 -->
  <button onclick="window.open('https://www.google.com')">Google</button>
  

• 方案3：使用form表单的提交跳转（适合本身处于表单业务场景的情况）
  代码示例：

  <form action="https://www.google.com" method="get">
    <button type="submit">Google</button>
  </form>
  

• 方案4：直接把<a>标签样式修改为按钮样式（语义更规范，避免嵌套元素的样式冲突）
  代码示例：

  <a href="https://www.google.com" class="custom-btn">Google</a>
  

  配套CSS样式参考：

  .custom-btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f5f5f5;
    color: #333;
    text-decoration: none;
    cursor: pointer;
  }
  .custom-btn:hover {
    background-color: #e6e6e6;
  }
  

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