Hover

Nudge Forward / Backward

Also called Arrow nudge

An arrow or the element itself slides a few pixels forward or backward on hover.

Next/back links, arrows

  • Forward
  • Backward
  • Icon Forward
  • Icon Back
  • Icon Up
  • Icon Down

View demo source

Prompt

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.

Add a "Nudge Forward / Backward" hover effect (also called arrow nudge) to [where].
The arrow should slide a little in the direction it points while the pointer is over the element, and slide back when it leaves: quick and small.
Move only the arrow without shifting the label or layout, and show the same effect on keyboard focus.

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.