Icon Slide Button

What it does

The icon slide button hides a little arrow inside your button and slides it into view the moment someone hovers, the label politely scooting over to make room. It's a small wink of motion that says yes, this is the one to click. Tiny movements like this quietly lift clicks because they promise the button is alive.

• The button itself never grows or shrinks; the rearranging happens inside, so your layout stays put.
• Keyboard visitors get the exact same reveal the moment they tab to it, no mouse needed.
• The motion runs on the smooth animation channels, never stuttering or nudging nearby text.
• The icon is yours, an arrow, a star, a hand, any small character you type in.
• It ships as one small reusable style rule; your buttons keep their markup untouched.
• For visitors who prefer less motion, it simply stays visible the whole time.

How it works

1. 1Type the icon you want in the little box, any single character, or leave it alone to keep the arrow.
2. 2Pick which side it slides in from, tucked after the label or leading before it.
3. 3Copy the prompt, a small style recipe for your AI, into whichever AI you use.
4. 4Add the rule to the buttons and links that deserve the flourish.
5. 5Hover and tab to one to test: the icon should glide in smoothly while the button's outer size never changes at all.

What you can customize

• The icon: whatever single character you type; leave it blank and the classic little arrow stays.
• Where it slides from: after the label is the classic forward nudge; before it flips the motion for variety.
• Colors, shape, and lettering stay completely your own, because your AI applies the slide to the buttons you already have, no rebuild needed.