I've successfully created a button-like effect on an <a> element by adding a tabindex, allowing users to navigate to it using the tab key.
Here's the scenario: When a user clicks on the button and then moves the mouse away, the active style remains until they click outside of it. However, if I remove the tabindex and repeat the process, the effect disappears as expected.
How can I maintain the same behavior even with the tabindex in place?
<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);
}