html - How to remove focus around buttons on click

Question

My buttons all have a highlight around them after I click them. This is in Chrome.

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

I am using Bootstrap with a theme, but I'm pretty sure that's not it: I was noticing this before on another project.

It goes away if I use an <a> tag instead of <button>. Why? If I wanted to use <button> how would I make it go away?

Answer 1

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.