Arrow move
Hover or keyboard-focus the link: the chevron slides along the inline axis to reinforce direction.
Widely Supported
Quick implementation
.arrow-move-link svg {
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.arrow-move-link:hover svg,
.arrow-move-link:focus-visible svg {
transform: translateX(5px);
}Prompt this to your LLM
Build a text link with a trailing arrow icon that translates on :hover and :focus-visible.
Constraints: transition only transform and/or opacity; include visible focus ring.
Return HTML + CSS.Why this matters in 2026
Micro-motion on CTAs increases perceived affordance without resorting to underline-only patterns.
The logic
Animating the SVG, not the text, keeps the copy stable for reading.
Accessibility & performance
Focus-visible parity with hover keeps keyboard users in the loop.