How to Remove Focus Around Buttons on Click

Solutions with the CSS outline property

If you want to remove the focus around a button, you can use the CSS outline property. You need to set the “none” value of the outline property.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of removing the focus around a button:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .button:focus {
        outline: none;
      }
    </style>
  </head>
  <body>
    <button class="button">
      <span class="name"></span> Click here
    </button>
  </body>
</html>
However, this is not recommended if you do not have a good consistent state for buttons and inputs.

Let’s see another example, where we add a little style to the <button> element. Here, we set the display property to “block” for the button. Like the previous example, we use the outline property with the “none” value, but note that we don’t use the :focus pseudo-class.

Example of removing the focus around a styled button without the :focus pseudo-class:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      button {
        background-color: #a2e0b3;
        font-size: 24px;
        border: none;
        cursor: pointer;
        outline: none;
        margin: auto;
        display: block;
      }
    </style>
  </head>
  <body>
    <div>
      <button type="submit">
        Click here
      </button>
    </div>
  </body>
</html>

Below, you can find another example, where we remove the focus around the HTML <a> tag. We set the display of the <a> tag to "inline-block".

Example of removing the focus around an HTML <a> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        background-color: lightblue;
        text-decoration: none;
        font-size: 20px;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 10px 30px;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <p>Click on the button below and start to learn Git.</p>
    <a href="https://www.w3docs.com/learn-git.html">Learn Git</a>
  </body>
</html>

In our last example, we remove the focus around the HTML <input> tag. Here, we use the :focus pseudo-class on the <input> element and set both the outline and box-shadow properties to "none". Also note that we use the ::-moz-focus-inner pseudo-element, which is a Mozilla extension.

Example of removing the focus around an HTML <input> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        font-size: 18px;
        cursor: pointer;
        border: none;
        display: inline-block;
        padding: 10px 20px;
      }
      input:focus {
        outline: none;
        box-shadow: none;
      }
      input::-moz-focus-inner {
        border: 0;
      }
    </style>
  </head>
  <body>
    <input type="button" value="Button">
  </body>
</html>
The ::-moz-focus-inner is non-standard, and it's not recommended on production sites facing the Web, as it won't work for every user.

How to disable focus only on mouse click while still allowing focus when selecting by keyboard?

Here's an example that demonstrates how to allow keyboard focus on a button while disabling focus on mouse click:

In order to test the result, please create an 'index.html' file in your local machine and use the given code and test it locally. 
<!DOCTYPE html>
<html>
<head>
  <style>
    /* Apply styles to elements that receive focus only through the keyboard */
    button:focus:not(:active) {
      outline: 2px solid blue;
    }

    /* Apply styles to elements that receive focus through any means */
    button:focus {
      outline: none;
    }
  </style>
</head>
<body>
  <button>Click me</button>
  <script>
    // Disable focus on mouse click
    document.addEventListener('mousedown', function(event) {
      if (event.detail > 1) {
        return; // do nothing if double-clicked
      }

      const target = event.target;
      const isButton = target.nodeName === 'BUTTON';

      if (!isButton) {
        return; // do nothing if not a button
      }

      event.preventDefault(); // prevent default mouse click behavior
    });
  </script>
</body>
</html>

In this example, we're using CSS to apply a blue outline to the button when it receives focus through the keyboard (using the :focus:not(:active) selector) and to remove the outline when it receives focus through any means (using the :focus selector).

To disable focus on mouse click, we're using JavaScript to listen for mousedown events. When a mousedown event occurs on a button, we check whether the event was a double-click (using the detail property of the event object) and whether the target element is a button. If the event was a single click on a button, we prevent the default mouse click behavior using the preventDefault() method.

With this code, the button will still receive focus when tabbed to using the keyboard, but will not receive focus when clicked with the mouse (single click).