CSS Hover Links with Background and Focus Styles

Hover effects can make links feel more interactive, but the same treatment should also be available to keyboard users. This example changes text and background for both :hover and :focus-visible.

Move the pointer here or focus with the keyboard

CSS for the effect Top ↑

.demo-link {
  display: inline-block;
  padding: .5rem .75rem;
  color: #0056b3;
}

.demo-link:hover,
.demo-link:focus-visible {
  color: #fff;
  background-color: #b54708;
  text-decoration: none;
}

HTML Top ↑

<a href="site_map.php" class="demo-link">HTML tutorials</a>

Remember touch devices Top ↑

Touch interfaces do not have a persistent hover state. Never hide required instructions or actions until hover; the link should be understandable before any interaction.

Animation is optional Top ↑

If you add transitions, keep them brief and avoid making motion essential. Users who prefer reduced motion should still get a complete, usable state change.

Frequently Asked Questions Top ↑

Is hover available on touch screens?
Not in the same reliable way as a mouse pointer, so do not depend on hover alone.

Should keyboard focus match hover?
It should provide an equally clear indication, though the exact visual treatment can differ.

Can a link background change with CSS only?
Yes. No JavaScript is required for a normal hover/focus visual effect.

Link states HTML tutorials

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect: