HTML+CSS按钮点击后无法恢复初始状态问题求助

问题根源 #

按钮点击后会触发:focus和:active状态，原有样式未覆盖这两个状态的表现，导致点击后背景色异常；后续添加的:focus红色样式又因优先级问题，一直阻断hover效果，直到按钮失去焦点。

修复代码 #

直接覆盖按钮的聚焦、激活状态样式，让它们保持紫色背景，仅在悬停时切换为绿色：

.btn-purple {
  background-color: var(--purple);
  color: var(--white);
}

.btn-purple:hover {
  background-color: var(--green);
}

/* 覆盖点击后的所有关联状态，保持紫色 */
.btn-purple:focus,
.btn-purple:active,
.btn-purple:active:focus {
  background-color: var(--purple);
  /* 可选：若不需要默认聚焦轮廓，可取消下面注释 */
  /* outline: none; */
}

关键说明 #

• :active对应按钮被按下的瞬间状态，:focus是点击后按钮保持聚焦的状态，active:focus是两种状态同时触发的场景，三者都覆盖才能确保所有点击场景下样式统一。
• 保留outline有助于无障碍访问，若要自定义聚焦样式，可替换为box-shadow等属性。

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