为何HTML按钮仅点击内部文本时才触发跳转？

原因 #

HTML规范明确禁止在<button>标签内部嵌套<a>标签，这种非法嵌套会导致浏览器解析异常——实际只有内部的<a>元素绑定了跳转逻辑，按钮的其他空白区域并没有关联跳转行为，所以点击按钮空白处没反应，只有点到文本才触发跳转。

解决方法 #

方法1：将按钮替换为样式化的<a>标签（推荐） #

把<button>换成<a>，通过CSS给<a>设置按钮样式，既符合HTML语义，又能实现整个按钮区域可点击：

<div class="main">
  <div class="main__container">
    <div class="main__content">
      <h1>RAID 2 EARN</h1>
      <h2>TECHNOLOGY</h2>
      <p>We make it easy!</p>
      <a href="raid2earn.html" class="main__btn">Get Started</a>
    </div>
    <div class="imgmain">
      <img id="main__img" src="/IMGS/picture1.svg"/>
    </div>
  </div>
</div>

然后在CSS中为.main__btn添加按钮样式（示例）：

.main__btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #2563eb;
  color: white;
  text-decoration: none;
  cursor: pointer;
}

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

如果必须保留<button>标签，可通过JavaScript绑定跳转逻辑，让整个按钮区域点击都生效：

<div class="main">
  <div class="main__container">
    <div class="main__content">
      <h1>RAID 2 EARN</h1>
      <h2>TECHNOLOGY</h2>
      <p>We make it easy!</p>
      <button class="main__btn" onclick="window.location.href='raid2earn.html'">Get Started</button>
    </div>
    <div class="imgmain">
      <img id="main__img" src="/IMGS/picture1.svg"/>
    </div>
  </div>
</div>

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