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.

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>

Result

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.

Do you find this helpful?

Related articles