Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Remove Focus Around Buttons on Click?
When building web applications, you may notice that clicking on buttons often leaves an outline or "focus ring" around them. This can be helpful for accessibility, but sometimes it's not desirable for specific designs. In this article, we'll explore several ways to remove the focus ring from buttons when they are clicked, without sacrificing accessibility for keyboard users.
Syntax
/* CSS approach */
button:focus {
outline: none;
}
/* Or using focus-visible for better accessibility */
button:focus-visible {
outline: 2px solid color;
}
Method 1: Using CSS :focus-visible Pseudo-class
The recommended approach uses CSS :focus-visible pseudo-class to apply focus styles only when a keyboard is used, ensuring that the focus ring is hidden on mouse click but still accessible for keyboard users
<!DOCTYPE html>
<html>
<head>
<style>
.button {
padding: 12px 24px;
border: 2px solid #007bff;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
font-size: 16px;
margin: 10px;
}
/* Remove default focus outline */
.button:focus {
outline: none;
}
/* Show focus only for keyboard navigation */
.button:focus-visible {
outline: 3px solid #ff6b35;
outline-offset: 2px;
}
.button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h3>Try clicking vs using Tab key</h3>
<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
</body>
</html>
Three blue buttons appear. When clicked with mouse, no focus outline shows. When navigated using Tab key, an orange outline appears around the focused button.
Method 2: Using JavaScript addEventListener Method
For more control, you can use JavaScript to detect click events and dynamically remove focus styling
<!DOCTYPE html>
<html>
<head>
<style>
.js-button {
padding: 12px 24px;
border: 2px solid #28a745;
border-radius: 5px;
background-color: #28a745;
color: white;
cursor: pointer;
font-size: 16px;
margin: 10px;
}
.js-button:focus {
outline: 3px solid #ffc107;
outline-offset: 2px;
}
</style>
</head>
<body>
<button class="js-button" id="btn1">Click Me</button>
<button class="js-button" id="btn2">Or Me</button>
<script>
document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('.js-button');
buttons.forEach(button => {
button.addEventListener('mousedown', function() {
this.style.outline = 'none';
});
button.addEventListener('blur', function() {
this.style.outline = '';
});
});
});
</script>
</body>
</html>
Two green buttons appear. Mouse clicks remove focus outline temporarily, but keyboard navigation still shows the yellow focus ring for accessibility.
Method 3: Complete Focus Removal (Not Recommended)
If you need to completely remove focus styling, use this approach with caution as it impacts accessibility
<!DOCTYPE html>
<html>
<head>
<style>
.no-focus {
padding: 12px 24px;
border: 2px solid #dc3545;
border-radius: 5px;
background-color: #dc3545;
color: white;
cursor: pointer;
font-size: 16px;
margin: 10px;
outline: none !important;
}
.no-focus:focus {
outline: none !important;
box-shadow: none !important;
}
</style>
</head>
<body>
<p><strong>Warning:</strong> This method removes ALL focus indicators</p>
<button class="no-focus">No Focus Ring</button>
</body>
</html>
A red button appears with no focus outline regardless of interaction method (mouse or keyboard). This approach should be avoided for accessibility reasons.
Best Practices
- Use :focus-visible This is the modern, accessible approach
- Preserve keyboard navigation Always ensure keyboard users can see focus indicators
- Test thoroughly Verify both mouse and keyboard interactions work correctly
- Consider alternatives Instead of removing focus, customize it to match your design
Conclusion
The :focus-visible pseudo-class is the best method to remove focus rings on button clicks while maintaining accessibility. It automatically handles the distinction between mouse and keyboard interactions, ensuring your buttons look clean when clicked but remain accessible to all users.
1K+ Views
