Icon slide

Quick implementation

.icon-slide {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-slide .icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

.icon-slide:hover .icon {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .icon-slide .icon {
    transition: none;
  }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a CSS UI component library.

Goal: A button with a trailing icon (arrow →) that slides right on hover — no JavaScript.

Technical constraints:
- Use transform: translateX(4px) on the icon element, not margin or padding.
- Apply transition: transform 0.2s ease to the icon — not to the whole button.
- The button must use display: inline-flex with align-items: center and gap for spacing.
- Use oklch() for all colors, not hex or rgba().
- Include @media (prefers-reduced-motion: reduce) to disable the transition.

Framework variant (pick one):
A) Vanilla CSS with a .icon-slide parent class and a .icon child class.
B) React component — accept label and icon as props; icon defaults to →.

Edge cases to handle:
- Icon must not cause layout shift when it moves (transform is compositor-only).
- Works with any inline icon: Unicode arrows, SVG, or icon font glyphs.
- Provide a variant where the icon fades in on hover (opacity: 0 → 1) instead of sliding.

Return CSS and minimal HTML markup.

Why this matters in 2026

The sliding icon is one of the most widely used micro-interactions in modern UI — call-to-action buttons, navigation links, and card teasers all use it to signal directionality. Done with CSS transitions, it requires zero JavaScript and runs on the compositor at 60fps.

The logic

The icon element gets transition: transform 0.2s ease at rest. On :hover of the parent .icon-slide, the icon receives transform: translateX(4px). The key architectural decision is targeting .icon-slide:hover .icon — the transition lives on the child, but the trigger is on the parent. This means the icon animates both in and out smoothly; if the transition were set only in the :hover state, the return would be instant.

Wrapping the icon character in a span with display: inline-block is required because transform has no effect on inline elements in most browsers.

Accessibility & performance

@media (prefers-reduced-motion: reduce) sets transition: none, so the icon still moves to its translated position instantly — preserving the semantic visual affordance without animation. The aria-hidden="true" attribute on the icon element prevents screen readers from announcing the arrow character, since the button label already communicates the action. Using transform ensures the animation is compositor-only with no layout recalculation.