I styled focus state for my webpage. But even after I’m done clicking button/link, the focus stays, unless I click whitespaces. How do I make it go?

I’ve styled the focus state for my webpage to my liking. But now it stays on the buttons/links even when I’m done clicking them. I have to click the blank spaces to make it go away. I only want the focus state to be visible when we use TAB key for shifting focus, and(optional) when the buttons are clicked. How can I do that? Do I need to write some JavaScript for that? Basically I want the focus state to behave in a default way, the way it did before I styled it.

*:focus {
  outline: none;
  box-shadow: 0 0 0 0.5rem rgba(61, 112, 46, 0.5);
}

.cta *:focus {
  box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.5);
}

Answer

try using this css selector instead of *:focus

*:focus-visible{
    outline: none;
    box-shadow: 0 0 0 0.5rem rgba(61, 112, 46, 0.5);

}