Issue with Button Transparency and Border Color Change on Click

Question

I have a button in my HTML code that I've styled with CSS to have a green background, white text, and an orange border. Here's the HTML and CSS code:

.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>

However, when I click and hold (either left or right click) on the button, it becomes transparent, and the border color changes to blue. I want the button to maintain its original appearance when clicked.

Could anyone please advise on how to fix this issue?

Thank you in advance!

Answer 1

I have tried the code you provided, and it does not appear that the mouse becomes transparent and the border does not turn blue. It should be a contamination of your project's code style.