:hover applies when the cursor is over an element. :focus applies when an element receives keyboard or mouse focus — critical for accessibility.
Always style both :hover and :focus together for keyboard-accessible interactive elements.
.btn {
background: #007bff;
transition: background 0.2s;
}
/* Style both hover and focus together */
.btn:hover,
.btn:focus {
background: #0056b3;
outline: none;
}
/* Visible focus ring for keyboard users */
.btn:focus-visible {
outline: 3px solid #80bdff;
outline-offset: 2px;
}Never remove :focus styles without providing an alternative — keyboard users need visible focus indicators.