按钮样式失效求助：关联外部CSS后按钮显示异常

嘿，我来帮你搞定这个按钮样式的问题！你的代码里有几个小问题导致了默认白色区域和样式不生效的情况，我来拆解一下：

问题根源 #

1. HTML结构不规范：你把<button>嵌套在了<a>标签里——这是不符合HTML标准的，button是交互式元素，嵌套在a标签里会触发浏览器的默认样式冲突，这就是你看到的“默认白色区域”的主要原因。
2. CSS选择器错误：你写的.buttonEnterClasses a:hover完全不对，因为.buttonEnterClasses本身就是那个a标签，所以hover选择器应该直接写在它身上。
3. 重复属性冗余：你的CSS里有重复的border、border-radius、text-align等属性，不仅没用还可能干扰样式。

方案一：用a标签直接模拟按钮（推荐） #

既然你本来就是要做跳转链接，完全不需要嵌套button，直接把a标签改成按钮样式就好，结构更规范，样式也更好控制。

修改后的HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./Styles/main.css" />
</head>
<body>
<a href="bells.html" class="buttonEnterClasses">Enter Classes</a>
</body>
</html>

修改后的CSS（清理冗余+修正选择器）

/*CSS for the Enter Classes Button in Index.Html*/
.buttonEnterClasses{
  display: inline-block;
  box-sizing: border-box;
  padding: 0 30px;
  vertical-align: middle;
  font-size: .875rem;
  line-height: 38px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #d5a32d;
  color: #fff;
  border: none;
  border-radius: 5px;
  transition: color, background-color, border-color .1s ease-in-out;
  touch-action: manipulation;
}
.buttonEnterClasses:hover {
  /* 这里可以自定义hover效果，比如降低透明度或者加深背景色 */
  opacity: 0.8;
  /* 也可以换成：background-color: #b88a24; */
}

方案二：保留button元素（仅当你必须用button时） #

如果你一定要用button来实现跳转，那得去掉外层的a标签，用JS处理跳转，同时重置button的所有默认样式：

修改后的HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./Styles/main.css" />
</head>
<body>
<button class="buttonEnterClasses" onclick="window.location.href='bells.html'">Enter Classes</button>
</body>
</html>

修改后的CSS

/*CSS for the Enter Classes Button in Index.Html*/
.buttonEnterClasses{
  display: inline-block;
  box-sizing: border-box;
  padding: 0 30px;
  vertical-align: middle;
  font-size: .875rem;
  line-height: 38px;
  text-align: center;
  text-transform: uppercase;
  background-color: #d5a32d;
  color: #fff;
  border: none;
  border-radius: 5px;
  transition: color, background-color, border-color .1s ease-in-out;
  touch-action: manipulation;
  cursor: pointer; /* 加上鼠标悬停的指针效果 */
}
.buttonEnterClasses:hover {
  opacity: 0.8;
  /* 或者 background-color: #b88a24; */
}

为什么这样改？ #

• 方案一完全符合HTML语义，a标签就是用来做页面跳转的，不需要额外JS，也不会有浏览器默认样式的干扰，是最优解。
• 方案二适合必须使用button的场景（比如表单里的操作按钮），但需要用JS来实现跳转，同时要手动重置button的默认样式。

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