Shift Circle Button for Framer with Customizable Hover Animation

Shift Circle Button for Framer with Customizable Hover AnimationShift Circle Button for Framer with Customizable Hover Animation

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Anastasiia Tkach

• Oct 12

Introducing Shift Circle Button for Framer! 🚀

Elevate your website’s CTAs with a smooth, directional microinteraction.

In its default state, Shift Circle Button features a neat circular badge on the right. On hover, the badge smoothly shifts and expands to the left, creating a playful yet clean hover effect that guides the user's focus.

✨ What’s inside:

• Interactive Hover State: Smooth left-to-right icon shift animation.

• Fully Customizable: Easily adjust colors, fonts, icons, size, padding, radius, speed, and easing curves.

• Production Ready: Zero external dependencies, responsive, and lightweight.

Perfect for SaaS landing pages, portfolios, agency sites, and hero sections!

Check it out and let me know what you think! 👇

Completed work

Framer Framer Website Development Framer Website Design

Rokas Griškonis

pro

• Oct 21

I tested two speeds for this button in Framer.

Which one feels better to you?

A (faster) or B (slower)?

Framer Framer Website Design Framer Website Development

Sagar Nawaz

• Oct 22

Ye le Jani Rokas wali post ke liye: Nice test Rokas! Between A and B, I'd lean towards A (faster) — feels more snappy and responsive in Framer, especially for a CTA button. The slower B has a smooth premium feel but faster usually converts better as it feels more instant. Great attention to micro-interaction detail!