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