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