Hover and Focus States

Pseudo-classes let you style elements based on their state, like when hovered or focused.

The :hover Pseudo-class

Style elements when the mouse is over them:

The :focus Pseudo-class

Style elements when they have keyboard focus:

The :active Pseudo-class

Style elements while being clicked:

Link States

Links have special pseudo-classes for their states:

Card Hover Effects

Focus-Visible

:focus-visible only shows focus styles for keyboard navigation:

Exercise: Style Button States

Create hover and focus styles for a button: