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.
Article Tags :
Recommended Articles