w3docs logo
  1. Snippets
  2. HTML
  3. How to Remove Focus Around Buttons on Click

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?