CSS Transitions and Hover Effects

CSS transitions animate property changes between states, such as a button going from normal to hovered.

A transition defines transition-property, transition-duration, transition-timing-function and optionally delay. Put the transition on the default state so it also animates when the pointer leaves.

Prefer transform and opacity for smooth visual motion. Add :focus-visible state styling and honor prefers-reduced-motion for users who want fewer animations.

The browser interpolates supported property values as the target state changes. Hover is not the only possible trigger: focus and class changes can also transition.

Hover and move away to compare a state without animation.

HTML

<button type="button" class="motion-button">Explore courses</button>

CSS

.motion-button { border: 0; background: #1d4ed8; color: white; border-radius: 8px; padding: 12px 18px; cursor: pointer; } .motion-button:hover { background: #1e40af; transform: translateY(-2px); }

Rendered output

Observe: The color and position change instantly when hovered.

Add a short transition and keyboard-visible focus.

HTML

<button type="button" class="motion-button">Explore courses</button>

CSS

.motion-button { border: 0; background: #0f766e; color: white; border-radius: 8px; padding: 12px 18px; cursor: pointer; transition: background-color 180ms ease, transform 180ms ease; } .motion-button:hover { background: #115e59; transform: translateY(-3px); } .motion-button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .motion-button { transition: none; } }

Rendered output

Observe: Hover changes are gradual unless reduced-motion preference removes the transition.

The browser interpolates supported property values as the target state changes. Hover is not the only possible trigger: focus and class changes can also transition.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Never depend on hover alone to make a button discoverable.

• transition: all can animate properties unintentionally and cause layout instability.

Change transition-duration to 600ms and compare the motion with the original 180ms.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Keep transitions short, purposeful and optional for reduced-motion preferences.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.