How to style hover and focus states

Style more than hover

Hover is unavailable on many touch devices and does not represent keyboard focus. Apply equivalent feedback to relevant focus states.

.button:hover,
.button:focus-visible {
  background-color: #0c4a6e;
}

Create a visible focus ring

:focus-visible generally shows a ring when the browser determines that a visible indicator is needed.

:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

Represent component states

Use semantic HTML attributes when possible, then style them directly.

button[aria-pressed="true"] {
  background: #075985;
  color: white;
}
button:disabled { opacity: 0.55; }

Make interactions robust

• Never remove focus indication without a replacement
• Keep state contrast clear against surrounding colors
• Do not reveal essential content only on hover
• Test with keyboard, mouse, touch, and high-contrast settings