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.

Answer 1

Although it's easy to just remove outline for all focused buttons (as in user1933897's answer), but that solution is bad from the accessibility point of view (for example, see Stop Messing with the Browser's Default Focus outline)

On the other hand, it's probably impossible to convince your browser to stop styling your clicked button as focused if it thinks that it's focused after you clicked on it (I'm looking at you, Chrome on OS X).

So, what can we do? A couple options come to my mind.

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

You're instructing your browser to remove the focus around any button immediately after the button is clicked. By using mouseup instead of click we're keeping the default behavior for keyboard-based interactions (mouseup doesn't get triggered by keyboard).

2) CSS: .btn:hover { outline: 0 !important }

Here you turn off outline for hovered buttons only. Obviously it's not ideal, but may be enough in some situations.