Can you apply a transition to an element’s pseudo-class (like :hover)?

Yes, you can apply transitions to an element’s pseudo-class such as :hover, :focus, or :active. In fact, transitions are most commonly used with these pseudo-classes to create smooth interactive effects when an element changes state.

The transition is declared on the base (default) state of the element, not inside the pseudo-class. This ensures the browser knows how to animate from the initial to the new state when the pseudo-class is triggered.

In this example, the button smoothly changes its background color and scales up slightly when hovered, thanks to the transition defined in the default state.