How to remove focus around buttons on click

I found this Q and A on another page, and overriding the button focus style worked for me. This problem may be specific to MacOS with Chrome.

.btn:focus {
  outline: none;
  box-shadow: none;
}

Note though that this has implications for accessibility and isn't advised until you have a good consistent focus state for your buttons and inputs. As per the comments below, there are users out there who cannot use mice.

You want something like:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

The .blur() method correctly removes the focus highlighting and doesn't mess up Bootstraps's styles.

my understanding is that the focus is first applied following the onMouseDown event, so calling e.preventDefault() in onMouseDown may be a clean solution depending on your needs. This is certainly an accessibility friendly solution, but obviously it adjusts the behaviour of mouse clicks which may not be compatible with your web project.

I am currently using this solution (within a react-bootstrap project) and I do not receive a focus flicker or retained focus of buttons after a click, but I am still able to tab my focus and visually visualize the focus of the same buttons.