Micro-Interaction Loading Button

This Micro-Interaction Loading Button demonstrates how to pack multiple feedback states into a single UI element without cluttering the interface. It starts as a clean “Submit” button. Hovering reveals a directional arrow, hinting at action. Clicking triggers a seamless loading sequence where the arrow transforms into a spinner, finally resolving into a checkmark to confirm success.

Core Technique: Padding Transitions & Absolute Icons

The smooth expansion effect relies on manipulating padding-right while sliding an absolutely positioned icon container into view.

1. The Hover Slide

The icon container (.expand-icon) sits absolutely on the right edge but is pushed out of view initially using transform: translateX(...).

• On Hover: The button’s right padding increases to make room, and the icon container slides back to translateX(0).
• Why Padding? Transitioning padding instead of width allows the text (“Submit”) to stay left-aligned naturally without needing complex calculations.

button.expand:hover {
  /* Create space for the icon */
  padding-right: calc(25px + var(--button-height));
}

button.expand:hover > .expand-icon {
  /* Slide icon into the padded space */
  transform: translateX(0);
}

2. State Management via Classes

JavaScript manages the button’s lifecycle by adding/removing classes: .loading, .loaded, and .finished.

• .loading: Hides the arrow SVG (scale(0)) and fades in the CSS spinner (.loader).
• .loaded: Hides the spinner and swaps the DOM display to the checkmark SVG.
• .finished: Animates the checkmark into position (translateY(0)).

Browser Support

The component relies on standard CSS transitions and transforms.

Key Technologies:

• CSS Transitions: For smooth padding and transform changes.
• CSS Animations (@keyframes): For the rotation of the loader.
• SVGs: For crisp icons at any scale.