How To Remove Focus Around Buttons On Click

admin_img Posted By Bajarangi soft , Posted On 08-10-2020

To remove focus around the button outline:none property is used. 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.

Button 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.
<!DOCTYPE html>
<html>

<head>
    <title>
        Remove focus around the button
    </title>

    <style>
        h1 {
            text-align: center;
            margin-top: 10%;
            font-family: Arial;
            color: darkred;
        }
        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>
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>

Related Post