CSS按钮开发疑问：如何高效添加HREF链接并减少冗余代码

最优解决方案：避免按钮嵌套链接，二选一即可 #

首先说破问题本质：你现在用<button>套<a>的做法既不语义化，又会带来默认样式冲突，完全没必要。下面给你两种最高效的实现方式，都能复用你现有的.button-1样式，不会产生冗余代码：

方案1：用<a>标签直接模拟按钮（优先推荐）

如果你的按钮只是用来跳转链接，用<a>标签才是语义正确的选择，而且能直接复用你的按钮样式，只需要给CSS加一行小改动让样式正常生效：

修改后的CSS：

.button-1 {
  display: inline-block; /* 让a标签支持padding等块级样式（a默认是行内元素） */
  background-color: #f7f1e3;
  border: none;
  color: #393939;
  padding: 12px 12px;
  font-size: 14px;
  cursor: pointer;
  font-family: Montserrat;
  font-weight: 400;
  font-style: normal;
  text-decoration: none; /* 去掉a标签默认的下划线 */
}
.button-1:hover {
  background-color: #aaa69d;
  color: #393939;
}

对应的HTML：

<a href="你的目标链接" class="button-1">Click Me</a>

这样一来，所有需要跳转的"按钮"都直接用这个<a>标签，样式完全复用，没有任何冗余，还符合HTML语义规范。

方案2：保留<button>标签，用JS实现跳转（适合必须用按钮的场景）

如果你因为某些原因必须使用<button>标签（比如在表单里需要按钮的原生提交行为，或者有其他按钮专属的交互逻辑），可以通过自定义data属性+批量JS事件来实现跳转，同样不需要额外CSS：

原CSS完全不用改：

.button-1 {
  background-color: #f7f1e3;
  border: none;
  color: #393939;
  padding: 12px 12px;
  font-size: 14px;
  cursor: pointer;
  font-family: Montserrat;
  font-weight: 400;
  font-style: normal;
}
.button-1:hover {
  background-color: #aaa69d;
  color: #393939;
}

HTML给按钮加data-href属性存链接：

<button class="button-1" data-href="你的目标链接">Click Me</button>

然后加一段批量处理的JS（放在页面底部或者<script>标签里）：

// 一次性给所有带data-href的.button-1按钮绑定跳转事件
document.querySelectorAll('.button-1[data-href]').forEach(btn => {
  btn.addEventListener('click', () => {
    window.location.href = btn.dataset.href;
  });
});

这种方式的好处是，所有同类型按钮只需要加个data-href属性就能实现跳转，不用重复写JS逻辑，样式也完全复用，没有冗余代码。

为什么不推荐按钮嵌套链接？ #

• 语义冲突：<button>是交互控件（比如提交表单、触发动作），<a>是导航链接，嵌套会混淆HTML语义，不利于SEO和无障碍访问；
• 样式冗余：必须额外写CSS覆盖<a>标签的默认样式（比如下划线、颜色），增加代码量；
• 潜在问题：部分浏览器可能会对嵌套标签的点击事件产生异常，比如点击区域冲突。

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