Icon Slide Button

Copy this design of a button whose icon slides into view on hover, pushing the label over, and let your AI rebuild it for your own website or app.

Customize the prompt

What it does

This button hides a little arrow and slides it into view the moment someone hovers, and the label moves over to make room. Copying it is easy, and your AI rebuilds it inside whatever you're making, a website, an app, a side project.

It's a small bit of motion that says yes, this is the one to click. You want it on the buttons that matter, like sign up or checkout.

  • The button itself never grows or shrinks; the moving around happens inside, so your layout never shifts.
  • Keyboard visitors get the same slide the moment they tab to it, no mouse needed.
  • On phones, where there's no hover, the icon simply stays visible.
  • You can choose the icon you like, an arrow, a star, a hand, any small character you type in.

How it works

  1. Type the icon you want in the little box, any single character, or leave it alone to keep the arrow.

  2. Pick which side it slides in from, after the label or before it.

  3. Copy the prompt, a small style recipe written for your AI.

  4. Paste it into whichever AI you use, ChatGPT, Claude, Cursor, any of them.

  5. Tell your AI where the style goes when it asks: sitewide, one spot, one type of page, or one type of element.

  6. Your AI writes one new style rule that adds the slide to the buttons you already have.

  7. Add that rule to the buttons and links you want it on.

  8. Hover over one to test and watch the icon slide in while the button's outer size never changes.

  9. Tab to it with your keyboard and make sure the same slide happens with no mouse involved.

  10. Check it on your phone too, there's no hover there, so the icon should simply sit next to the label.

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 usual choice; before the label makes the icon lead the way.
  • Colors, shape, and lettering stay completely your own, because your AI applies the slide to the buttons you already have, no rebuild needed. It stacks with a submit button with real loading states, where the icon invites the click and the states handle the wait. Browse the other buttons on the shelf if you want a different feel for the same job.

You'll also like