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

If you're using a webkit browser (and potentially a browser compatible with webkit vendor prefixing), that outline belongs to the button's -webkit-focus-ring pseudoclass. Simply set it's outline to none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome is such a webkit browser, and this effect happens on Linux too (not just a macOS thing, although some Chrome styles are macOS only)