Most CTA buttons are boring. Click. Done. No personality.
I wanted a button that felt alive — one that reacts to you, pulls you in, and makes clicking feel satisfying. So I built the Aura Slide - Animated Magnetic Button with pure Tailwind CSS v4. 🎁
What I Built
Aura Slide - Animated Magnetic Button — a premium, high-performance CTA button featuring:
✅ Magnetic sliding effect — icon smoothly transitions left to right on hover
✅ 360-degree icon rotation micro-interaction
✅ Dynamic glass-shine overlay
✅ Built entirely with Tailwind CSS v4 — zero custom CSS
✅ Perfect for landing pages, portfolio sites, and hero sections
See It in Action
The Design Breakdown
The Magnetic Effect
The star feature — on hover, the icon slides smoothly from left to right using Tailwind's transition and translate utilities. It creates a satisfying "pull" feeling that draws the user's eye and encourages clicks.
Glass-Shine Overlay
A subtle shine sweeps across the button on hover — giving it that premium, high-end feel you see on Apple and top SaaS product pages. Pure Tailwind, no extra libraries.
360° Icon Rotation
The arrow icon completes a full rotation on hover — a micro-interaction that adds personality without being distracting.
Why Tailwind CSS v4?
Tailwind v4 brings significant performance improvements and cleaner utility classes. This button is built to take advantage of the latest features — making it both modern and future-proof.
Why CTA Buttons Matter
A great CTA button can directly impact your conversion rate. Small details like:
Hover animations that feel responsive
Visual feedback on interaction
Premium aesthetics that build trust
...all contribute to users actually clicking. This button was designed with all of that in mind.
Get the Free Code
👉 Get the free code → Aura Slide Animated Magnetic Button
No sign-up required. Copy, paste, ship. 🚀
What is CodeBar Library?
CodeBar Library is a growing collection of free and premium UI components built for developers who care about design quality.
Available tech stacks:
HTML/CSS
Tailwind CSS
React
Framer Motion
GSAP animations
Bootstrap
Everything is production-ready and copy-paste friendly. Whether you're building a portfolio, a SaaS product, or a client project — there's something for you.
What's Coming Next?
🔨 Full Stack Project Starter Kits
🎨 Premium UI Templates (Landing Pages, Dashboards)
⚡ More free Tailwind components every week
Drop a ❤️ if you found this useful and follow for more free components every week!
Using this button in your project? Drop a link in the comments — I'd love to see it! 👇
→ Browse all free components at CodeBar Library
Top comments (0)