Icon Slide
Icon that slides in on hover.
The code
A glimpse of the source:
index.html
<button class="demo-btn btn-icon-slide">
Continuer
<span class="icon">→</span>
</button></div>
🔒 Unlock the full code
Full HTML + CSS + JS, copy-paste-ready — with 800 more Premium effects.
Concrete use cases
A few real contexts where Icon Slide shines:
- The primary action of a contact form
- The main button of a sales page
- A newsletter sign-up CTA
How it works
Pure CSS effect — no JavaScript dependency. It relies on CSS transforms.
Make it yours
You can tweak:
- the colors, size and timing straight in the CSS
Add it in 3 steps
- Paste the HTML where you want the effect on your page.
- Add the CSS to your stylesheet (or in a <style> tag).
- Tweak the colors and CSS variables to match your brand — nothing to install.
Browser support
Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation.
More Buttons effects
Browse all Buttons effects →FAQ
Is the code free?
This effect is part of the Premium library (801 effects, copy-paste-ready code). Around 70 effects are free.
How do I add it to my project?
Copy the HTML, CSS and JS and paste them in. No dependencies, works with any framework.
Does it work on mobile?
Yes — the effects are responsive and degrade gracefully.