按钮点击时透明度变化与边框变蓝问题求助

这是因为浏览器为按钮的:focus状态添加了默认样式（比如蓝色边框、透明度变化），而你的CSS没有覆盖这个状态的规则。按以下步骤修复：

1. 覆盖所有交互状态的样式 #

把:focus选择器加入到你现有的:hover、:active规则中，确保点击按住时的样式和hover/active完全一致，同时移除浏览器默认的outline：

.index_button_left.btn_custom {
  background-color: green;
  color: white;
  height: 100px;
  width: 500px;
  font-size: xx-large;
  font-family: 'Playfair Display SC', sans-serif;
  border: 3px solid orange;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.9s;
  /* 移除浏览器默认的焦点边框 */
  outline: none;
}

.index_button_left.btn_custom:hover,
.index_button_left.btn_custom:active,
.index_button_left.btn_custom:focus {
  background-color: orange;
  color: white;
  border: 3px solid green;
  opacity: 1;
}

2. 优化冗余代码（可选） #

你当前的CSS重复了很多相同属性，比如宽高、字体，可以把这些固定样式放在基础规则里，只在交互状态中修改变化的属性：

.index_button_left.btn_custom {
  background-color: green;
  color: white;
  height: 100px;
  width: 500px;
  font-size: xx-large;
  font-family: 'Playfair Display SC', sans-serif;
  border: 3px solid orange;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.9s;
  outline: none;
}

.index_button_left.btn_custom:hover,
.index_button_left.btn_custom:active,
.index_button_left.btn_custom:focus {
  background-color: orange;
  border-color: green;
}

无障碍访问提示 #

如果需要兼顾无障碍需求，不建议直接用outline: none移除焦点提示，可以自定义焦点样式替代，比如：

.index_button_left.btn_custom:focus {
  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.5); /* 自定义橙色焦点阴影 */
}

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