How to remove focus around buttons on click?

To remove focus around the button outline:none property is used.

Syntax:

button {
    // Remove focus around button
    outline:none;  
}

Outline property: Outline is an element property which draws a line around element but outside the border. It does not take space from the width of an element like border.

Example 1: This example creates focus on button.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Remove focus around the button
    </title>
      
    <style>
        h1 {
            text-align: center;
            margin-top: 10%;
            font-family: Arial;
            color: green;
        }
        button {
            background-color: lightgray;
            font-size: xx-large;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
  
<body>
    <h1>
        Button get Focused when clicking it
    </h1>
      
    <div>
        <button type="submit" 
            style="margin:auto;display:block;">
            click here
        </button>
    </div>
</body>
  
</html>                                    

chevron_right


Output:

Example 2: This example uses outline:none property to remove focus from button after clicking the button.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        Remove Focus from button
    </title>
      
    <style>
        h1 {
            text-align: center;
            margin-top: 10%;
            font-family: Arial;
            color: green;
        }
        button {
            background-color: lightgray;
            font-size: xx-large;
            border: none;
            cursor: pointer;
            outline: none;
        }
    </style>
</head>
  
<body>
    <h1>
        Remove focus from button when
        clicking the button
    </h1>
      
    <div>
        <button type="submit" 
            style="margin:auto; display:block;">
            click here
        </button>
    </div>
</body>
  
</html>                    

chevron_right


Output:
In the above code, the outline:none property is used to remove focus from button.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.