Adding tab index on a href element causing the active class not to be deactiavted

Question

I have created a button like feel on a href element. I have added a tabindex on it so that when user uses tabs keys he lands on the button.

Scenario: User clicks on button and takes the mouse out. The active style still remains until clicked outside. If i remove the tab index and test after user clicks and takes the mouse out the effect is gone which is right?

How can i achieve the same even when tab index is there?

<a class="button" tabindex="0">CALCULATE</a>
.button {
    background-color: rgb(13, 93, 166);
    display: inline-block;
    padding: 20px;
    border: 1px solid blue;
}

.button:active, .button:focus, .button:hover {
    background-color: rgb(96, 178, 212);
}

https://jsfiddle.net/f2ywgcnr/

Answer 1

Just remove the focus and you are good to go.

Just overwrite the focus in case it is in base class.

.button {
  background-color: rgb(13, 93, 166);
  display: inline-block;
  padding: 20px;
  border: 1px solid blue;
}

.button:active,
.button:hover {
  background-color: rgb(96, 178, 212);
}


/* Overrite the focus */

.button:focus {
  background-color: none;
}

<a class="button" tabindex="0">CALCULATE</a>