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
Type the icon you want in the little box, any single character, or leave it alone to keep the arrow.
Pick which side it slides in from, after the label or before it.
Copy the prompt, a small style recipe written for your AI.
Paste it into whichever AI you use, ChatGPT, Claude, Cursor, any of them.
Tell your AI where the style goes when it asks: sitewide, one spot, one type of page, or one type of element.
Your AI writes one new style rule that adds the slide to the buttons you already have.
Add that rule to the buttons and links you want it on.
Hover over one to test and watch the icon slide in while the button's outer size never changes.
Tab to it with your keyboard and make sure the same slide happens with no mouse involved.
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
Icon Sidebar Menu
A slim sidebar menu on the left with a logo, an icon per section, a highlighted badge for the free stuff, and the sign-in buttons at the bottom. Take the prompt on this page and paste it in your AI so it will build the same for your website.
Countdown Teaser Section
A bold full-width teaser block: one hype line, a giant live countdown, and a stat line with the key numbers in pills.
Search Bar
A search bar with an optional placeholder sentence, a red search button and suggestions if you want them, ready for a hero (the big top section of a page), a header or a bottom panel on phones. Copy it from here and your AI rebuilds it inside your own site, in your colors.