Skip to content
Related Articles

Related Articles

Improve Article
How to remove focus around buttons on click?
  • Last Updated : 22 Apr, 2019

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.




<!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>                                    

Output:

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




<!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>                    

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :