单击时按钮透明度和边框颜色变化的问题

Question

我的 HTML 代码中有一个按钮，我使用 CSS 对其进行了样式设置，使其具有绿色背景、白色文本和橙色边框。这是 HTML 和 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;
}

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

<div class="col-md-5 mt-5 text-left">
  <a href="{% url 'system' %}">
    <button class="btn index_button_left btn_custom" type="button">Discover the System</button>
  </a>
</div>

但是，当我单击并按住（左键单击或右键单击）按钮时，它会变为透明，并且边框颜色变为蓝色。我希望按钮在单击时保持其原始外观。

有人可以建议如何解决这个问题吗？

提前谢谢您！

Answer 1

我已经尝试过您提供的代码，并没有出现鼠标变透明且边框不变蓝色的情况。这应该是你项目代码风格的污染。