:active 伪类在按钮上不起作用

Question

编辑：我一直在使用 Chrome 进行测试。当我在 Edge 中打开它时， :active 起作用了。

所以现在看来​​问题出在 Chrome 上。我对编码非常陌生（尝试自学）。

有人知道为什么会这样吗？

---

试图重新创建谷歌主页。我正在创建按钮并尝试重新创建一些效果。我目前卡在 :active 伪类上。

我以为我已经对 :active 进行了编码，以使浅蓝色 1px 边框替换 :hover 的灰色边框。然而，我得到的不是那个，而是一个比 1px 厚得多的黑色边框。

我试图包含更多的序列以防它需要它们全部（：链接，：访问，：悬停，：活动），但问题仍然存在。有什么建议吗？

.btn {
  padding: 10px;
  border: solid 1px #fff;
  border-radius: 3px;
  background-color: #ebebeb;
  font-size: 15px;
}

.btn:hover {
  border: solid 1px #b3b3b3;
}

.btn:active {
  border: solid 1px #cddbf1;
}

.btn1 {
  padding: 10px 15px;
}

.btn2 {
  margin-left: 10px;
}

<div id="search-buttons">
  <button type="button" class="btn btn1">Google Search</button>
  <button type="button" class="btn btn2">I'm Feeling Lucky</button>
</div>

Answer 1

您确实会更改为活动颜色，但很快就会更改为悬停颜色，因此不太明显。

您可能想要焦点伪类，因为当用户点击时，即使他们离开（直到下一次点击某处），它仍然存在。

.btn {
  padding: 10px;
  border: solid 1px #fff;
  border-radius: 3px;
  background-color: #ebebeb;
  font-size: 15px;
}

.btn:hover {
  border: solid 1px #b3b3b3;
}

.btn:active, .btn:focus {
  border: solid 1px #cddbf1;
}

.btn1 {
  padding: 10px 15px;
}

.btn2 {
  margin-left: 10px;
}

<div id="search-buttons">
  <button type="button" class="btn btn1">Google Search</button>
  <button type="button" class="btn btn2">I'm Feeling Lucky</button>
</div>