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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...