Motion and Feedback

Transition Button Hover

A button uses transition so hover changes in color and position are animated instead of snapping instantly.

Program

transition tells the browser which property changes should animate, how long they should take, and which timing curve to use.

The browser paints intermediate frames instead of jumping at once.Transition Timelinehover starts -> intermediate frames -> final stylebackground and translate change over 300 msrest0 msstart100 msmiddle200 mshover300 msThe browser paints intermediate frames instead of jumping at once.
Figure: A transition fills the time between hover states. Model source: books/css/09motion_feedback/transition_button_hover/diagrams/transition_timeline.semantic.json.
transition_button_hover.html
Visuals: captured from real browser rendering
<style>
  .button { background: #2563eb; color: white; transform: translateY(0); transition: background-color 180ms ease, transform 180ms ease; }
  .button:hover { background: #0f766e; transform: translateY(-2px); }
</style>
<button class="button">Save changes</button>

  1. Paint the normal button state.

    The button starts with a clear primary color.
    The button starts with a clear primary color.

  2. Set the starting transform.

    The transform has a known start value before hover.
    The transform has a known start value before hover.

  3. Define animated properties.

    The browser interpolates color and transform changes.
    The browser interpolates color and transform changes.

  4. Add a hover rule.

    The hover selector provides the target style.
    The hover selector provides the target style.

  5. Lift the button on hover.

    The transition makes the button lift smoothly.
    The transition makes the button lift smoothly.
transition transition animates property changes between old and new values.
hover state :hover applies while a pointing device is over the element.