Focus and Active States for Better UX
When you click a button, press a key, or move through a form, your screen should clearly show where you are and what will happen next. This is what focus and active states are all about.
In this article, you’ll learn:
- What focus and active states are (in simple terms)
- Why they matter for usability and accessibility
- How to add them with basic HTML and CSS
- How to test and improve your own buttons and links
You don’t need any coding experience. We’ll go step by step, and you can copy, paste, and tweak the examples.
What Are Focus and Active States?
Before we write any code, let’s define two key ideas.
Focus state (keyboard or screen reader users)
When an element (like a button or link) is focused, it is currently ready to receive input from the keyboard.
- If you press the Tab key, you move focus from one element to the next.
- The focused element should be clearly highlighted, so the user knows where they are.
Without a clear focus state, keyboard and screen reader users may feel “lost” on the page.
Active state (mouse or touch users)
When an element is active, you are in the middle of clicking or tapping it.
- It’s the brief moment while your mouse button is pressed down, or your finger is pressing on the screen.
- The element should look slightly different to show: “Yes, I’m being pressed.”
Without an active state, buttons may feel unresponsive or broken.
Example 1: A Simple Button With Default Focus
Let’s start with the simplest possible button and see what the browser does by default.
<!-- Example 1: Basic button with browser default focus -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Default Button Focus</title>
</head>
<body>
<button>Click me</button>
</body>
</html>
What this does
<button>Click me</button>creates a basic button.- The browser automatically adds a focus outline (usually a faint line around the button) when you press Tab to reach it.
Try it yourself
- Save this as
button-default.html. - Open it in your browser.
- Press Tab on your keyboard.
- You should see a blue or dotted outline around the button.
This outline is the default focus state. It’s better than nothing, but we can make it clearer and match it to our design.
Example 2: Custom Focus State for Better Visibility
Now we’ll keep the same button, but add a custom focus style using CSS.
<!-- Example 2: Button with custom focus style -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Custom Focus Button</title>
<style>
/* Basic button look */
button {
background-color: #007bff; /* blue background */
color: white; /* white text */
border: none; /* remove default border */
padding: 10px 16px; /* space inside the button */
border-radius: 4px; /* slightly rounded corners */
cursor: pointer; /* pointer cursor on hover */
font-size: 16px; /* readable text size */
}
/* Focus state: when the button is selected with keyboard */
button:focus {
outline: 3px solid #ffcc00; /* thick yellow outline */
outline-offset: 2px; /* small gap between button and outline */
}
</style>
</head>
<body>
<button>Click me</button>
</body>
</html>
What changed
button { ... }gives the button a nice basic style.button:focus { ... }tells the browser how the button should look when focused.outline: 3px solid #ffcc00;creates a thick yellow border when focused.outline-offset: 2px;adds space between the button and the outline so it looks clear and intentional.
Expected result
- With your mouse, the button looks like a clean blue button.
- When you press Tab, you see a bright yellow outline around it.
Try it yourself
Change the outline color and thickness. For example:
button:focus {
outline: 4px dashed limegreen;
}
Reload and press Tab again. Notice how easy it is to see where focus is. This is great for users with low vision or those not using a mouse.
Example 3: Adding Hover and Active States
Next, let’s add more feedback. We’ll style hover and active states.
- Hover: When the mouse pointer is over the button.
- Active: When the button is actually being clicked (mouse button down).
<!-- Example 3: Button with hover and active states -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hover and Active Button</title>
<style>
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.15s ease, transform 0.05s ease;
/* transition makes changes feel smoother */
}
/* Hover: mouse is over the button */
button:hover {
background-color: #0056b3; /* darker blue */
}
/* Active: button is being clicked */
button:active {
background-color: #00408d; /* even darker blue */
transform: translateY(1px); /* tiny push-down effect */
}
/* Focus: keyboard focus is on the button */
button:focus {
outline: 3px solid #ffcc00;
outline-offset: 2px;
}
</style>
</head>
<body>
<button>Click me</button>
</body>
</html>
What’s happening here
button:hovermakes the button slightly darker when your mouse is over it.button:activemakes it even darker and moves it down by 1 pixel usingtransform: translateY(1px);. This feels like a physical “press”.transitionon the mainbuttonstyle smooths out these changes.
Why this improves UX
- Users can see that the button is interactive (hover state).
- Users can feel the click (active state), even though it’s just visuals.
- Keyboard users still have a clear outline (focus state).
Try it yourself
Change the transform in the :active state to:
button:active {
transform: scale(0.98); /* slightly shrink the button when pressed */
}
Refresh, click, and notice the new “press” sensation.
Example 4: Focus States for Links in a Navigation Bar
Buttons aren’t the only elements that need focus and active states. Links, especially in navigation menus, also need clear feedback.
Here’s a simple navigation bar with focus and active styles.
<!-- Example 4: Navigation links with focus and active states -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Focus and Active</title>
<style>
nav {
background-color: #222;
padding: 10px;
}
nav a {
color: #ccc; /* light gray text */
text-decoration: none; /* remove underline */
margin-right: 16px; /* space between links */
padding: 4px 8px; /* clickable area */
border-radius: 3px;
font-family: Arial, sans-serif;
}
/* Hover state for mouse users */
nav a:hover {
background-color: #444; /* darker background on hover */
color: #fff; /* white text */
}
/* Focus state for keyboard users */
nav a:focus {
outline: 2px solid #ffcc00;
outline-offset: 2px;
background-color: #333;
color: #fff;
}
/* Active state: during click */
nav a:active {
background-color: #555; /* even darker when pressed */
}
</style>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<p>Use Tab to move through the links and Enter to "click" them.</p>
</body>
</html>
What to notice
- With your mouse:
- Hovering over a link changes its background and text color.
- Clicking briefly shows the active darker background.
- With your keyboard:
- Press Tab to move between links.
- The focused link has a yellow outline and a darker background.
This makes navigation clearer and more accessible for everyone.
Try it yourself
Remove nav a:focus { ... } from the CSS and test again with the keyboard. It’s much harder to see where you are, right? Then add it back. This shows how important focus styles are.
Common Mistake: Don’t Remove Focus Without Replacing It
Many beginners see the default outline and think it looks “ugly”, so they remove it like this:
/* Bad practice: removing focus without adding a replacement */
button:focus,
a:focus {
outline: none;
}
This is a serious accessibility problem because keyboard users can no longer see where they are.
If you remove the default outline, always add a custom focus style that is at least as visible as the one you removed.
Quick Checklist for Good Focus and Active States
When you design buttons and links, ask yourself:
- Can I see where I am using only the keyboard?
- Press Tab and watch the screen.
- Is the focus style obvious?
- Use a clear outline or background change.
- Does the element respond when I hover or click?
- Try moving your mouse and clicking.
- Is the state different enough?
- Small color changes can be easy to miss; make it clear.
If you can answer “yes” to these, your UX is already better than many websites.
What’s Next?
You’ve learned how to:
- Understand focus and active states in simple terms
- Add custom focus styles for better accessibility
- Create hover and active feedback for buttons and links
- Avoid the mistake of removing focus without a replacement
Next steps you can try:
- Apply these styles to a small form with text inputs and a submit button.
- Experiment with different colors, outlines, and animations.
- Look at your favorite sites and notice how their focus and active states feel.
Every small change you make to focus and active states helps real people use your site more easily and safely. Keep experimenting, keep testing with both mouse and keyboard, and celebrate each improvement—you’re already designing better UX.
