Gradient border on click

Question

I've been noticing that if clicking on a button on my site (as shown in the example below) a gradient border is shown around the button. I've tried several browsers but this only shows in Google Chrome.

Is there a way of removing this CSS wize?

Answer 1

You can disable the outline with outline:none.

input,
select,
textarea,
button {
  outline: none;
}

And to stay safe with focus states:

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

However, some think it isn't a good idea to disable the outline due to accessibility issues (http://outlinenone.com/)