How to remove hover/focus styling after button click?

Question

I know that for designing and developing for accessibility, it is common for the &:hover and &:focus to have the same styling (mouse hover and tab focus). But I've run into the problem when I mouse click, release, and hover off the button, it remains in the &:focus state.

I thought adding styling to the &:active would solve it but I realized that it only affects when the button is clicked but not released.

Is there a way to keep the &:hover and &:focus the same but not have the focus styling stay if the user clicks on the button? I would prefer to avoid having to use javascript, but if that is the only solution then I am ok with that too. Thank you.

In the demo the first button is what I have right now. The current button is correct when tabbing, but not for mouse click. The second demo is what I expect for mouse click, but tabbing is incorrect.

edit

button {
  height: 200px;
  width: 200px;
  color: white;
  background-color: green;
  transition: background-color 250ms ease-out;
}

/*button:hover, button:focus {
  background-color: blue;
}

.btn2:focus {
  background-color: green;
}

.btn2:hover {
  background-color: blue;
}*/

button:hover {
  background-color: blue;
}

button:focus:active {
  background-color: blue;
}

<button class="btn1">Current Button Action</button>

<button class="btn2">Expected Button Action</button>

Answer 1

I solved my problem from this article: https://thoughtsandstuff.com/focus-style-css-for-keyboard-navigation/#what-about-focus-visible