How to Remove Focus Around Buttons on Click
Solutions with the CSS outline property¶
If you want to remove the focus around a button, you can use the CSS outline property. You need to set the “none” value of the outline property.
Example of removing the focus around a button:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.button:focus {
outline: none;
}
</style>
</head>
<body>
<button class="button">
<span class="name"></span> Click here
</button>
</body>
</html>Result
Let’s see another example, where we add a little style to the <button> element. Here, we set the display property to “block” for the button. Like the previous example, we use the outline property with the “none” value, but note that we don’t use the :focus pseudo-class.
Example of removing the focus around a styled button without the :focus pseudo-class:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
button {
background-color: #a2e0b3;
font-size: 24px;
border: none;
cursor: pointer;
outline: none;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div>
<button type="submit">
Click here
</button>
</div>
</body>
</html>Below, you can find another example, where we remove the focus around the HTML <a> tag. We set the display of the <a> tag to "inline-block".
Example of removing the focus around an HTML <a> tag:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
background-color: lightblue;
text-decoration: none;
font-size: 20px;
border: none;
cursor: pointer;
outline: none;
padding: 10px 30px;
display: inline-block;
}
</style>
</head>
<body>
<p>Click on the button below and start to learn Git.</p>
<a href="https://www.w3docs.com/learn-git.html">Learn Git</a>
</body>
</html>In our last example, we remove the focus around the HTML <input> tag. Here, we use the :focus pseudo-class on the <input> element and set both the outline and box-shadow properties to "none". Also note that we use the ::-moz-focus-inner pseudo-element, which is a Mozilla extension.
Example of removing the focus around an HTML <input> tag:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
font-size: 18px;
cursor: pointer;
border: none;
display: inline-block;
padding: 10px 20px;
}
input:focus {
outline: none;
box-shadow: none;
}
input::-moz-focus-inner {
border: 0;
}
</style>
</head>
<body>
<input type="button" value="Button">
</body>
</html>