Basic interactivity using :hover and :active states

A pseudo-class is a condition you attach to a selector with a colon. The element gets those styles only while the condition is true ~ no JavaScript involved.

The ones you’ll use

• :hover ~ the pointer is over it.
• :active ~ the mouse button is currently held down.
• :focus-visible ~ the element has keyboard focus.
• :disabled, :checked ~ for form controls.

Make it a fade, not a snap

.btn {
	transition: background 0.15s;
}
.btn:hover {
	background: crimson;
}

The transition goes on the normal state, not the hover state. Then it animates in both directions ~ on the way in and on the way out.

Please keep your focus styles

Browsers draw an outline around whatever has keyboard focus. It is very tempting to write outline: none because it doesn’t match your design.

If you do that, anybody navigating with a keyboard ~ which includes people who can’t use a mouse ~ has no idea where they are on your page. Style it instead:

.btn:focus-visible {
	outline: 3px solid navy;
	outline-offset: 2px;
}

:focus-visible only fires for keyboard focus, so mouse users never see it. There’s no reason left to remove it.

Hover doesn’t exist on phones

There’s no pointer on a touchscreen. Never hide anything important behind :hover ~ treat it as a bonus for mouse users, not a way to reveal content.