CSS按钮背景异常修复：按钮背景仍为白色的解决方法

核心问题分析 #

1. HTML结构不合法：<button>元素内部不能嵌套<a>标签，浏览器会自动修正这个错误结构，导致你的CSS样式仅作用在<a>上，而<button>本身的默认白色背景没有被覆盖。
2. 样式作用对象错误：你当前的CSS只给<a>设置了背景色，但<button>的默认样式（白色背景、默认边框等）未被重置，所以页面显示的是<button>的白色背景。

解决方案（二选一即可） #

方案一：用<a>标签模拟按钮（推荐用于跳转场景）

直接移除<button>，给<a>添加按钮样式，结构符合HTML规范，样式能正常生效。

修正后的HTML：

<a href="#" target="_blank" tabindex="1" class="s1btn">GitHub</a>

修正后的CSS：

.s1btn {
  text-decoration: none;
  color: white;
  background-color: #f36dcb;
  border: 1px solid black;
  border-radius: 3px;
  text-align: center;
  padding: 3px;
  display: inline-block; /* 让<a>支持块级元素的样式属性 */
  cursor: pointer; /* 模拟按钮的鼠标指针样式 */
}

.s1btn:hover {
  background-color: #844421;
}

.s1btn:active {
  background-color: #b36b43;
}

方案二：用<button>标签实现，通过JS处理跳转

如果必须保留<button>，移除内部的<a>，用JavaScript实现跳转逻辑。

修正后的HTML：

<button class="s1btn" onclick="window.open('#', '_blank')">GitHub</button>

修正后的CSS：

.s1btn {
  color: white;
  background-color: #f36dcb;
  border: 1px solid black;
  border-radius: 3px;
  text-align: center;
  padding: 3px;
  cursor: pointer;
  /* 重置按钮默认样式，避免浏览器自带样式干扰 */
  outline: none;
}

.s1btn:hover {
  background-color: #844421;
}

.s1btn:active {
  background-color: #b36b43;
}

额外修复：全局链接样式的错误 #

你当前的全局链接CSS中，links选择器是无效的，应该改为针对<a>标签的选择器：

a {
  font-size: medium;
  margin-left: auto;
  padding-right: 50px;
  color: #844421;
  font-weight: 500;
}

.hLink {
  margin-right: 30px;
}

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