How do I stop browsers from automatically highlighting a button when it is clicked?

Question

I am trying to make a custom HTML button element, but chrome highlights it (like above) when it is clicked. How do I prevent this from happening?

Answer 1

Solution(s) :-

button:focus {
    /** Your CSS styles**/
}
button:active {
    /** Your CSS styles**/
}

Explanation(s) :-

The :focus selector is used to select the element that has focus.
Tip: The :focus selector is allowed on elements that accept keyboard events 
or other user inputs.

Browser Support
Chrome  Safari  Firefox Opera   IE  Android iOS
4+      3.1+    Any     9.6+    8+  Any     Any

The :active selector is used to select and style the active link.
A link becomes active when you click on it.
Tip: The :active selector can be used on all elements, not only links.

Browser Support
Chrome  Safari  Firefox Opera   IE  Android iOS
4+      3.1+    Any     9.6+    8+  Any     Any

Syntax ::

:focus {
    css declarations;
}
:active {
    css declarations;
}

Notes And References :-

w3schools Reference (Focus Selector) ::

w3schools Reference (Active Selector) ::

Stack Overflow Solutions ::

Answer 2

G'day - this is the focus state of the button. You can style it as follows:

button:focus {
  outline: none;
  /** Any additional styles go here **/
}

For more information on focus take a look at this article from CSS tricks: https://css-tricks.com/almanac/selectors/f/focus/

Answer 3

Use this code

a:visited {
    outline: 0;
    border: 0;
}

See the code for better understanding about button behavior... https://codepen.io/zakirbd/pen/wmxxGX