Origin Button Pro is a premium animated button component for Framer that transforms ordinary call-to-action buttons into engaging micro-interactions.

Built with accessibility, responsiveness, and performance in mind, it supports keyboard navigation, touch devices, disabled states, smooth press animations, and optional cursor tracking for even more immersive interactions.

Inspired by Edwin Vakayil's work.

✨ What Makes It Stand Out

• Cursor-origin hover animations

• Three fill animation modes:

  • Radial Fill

  • Linear Wipe

  • Centered Fill

• Optional cursor-following animation

• Several animation styles to choose from

• Separate styling for Default and Disabled states

• Custom hover text color

• Built-in URL linking

• Optional "Open in New Tab"

• Responsive across desktop, tablet, and mobile

• Keyboard accessible with focus interactions

• Smooth press animation for tactile feedback

🖌️ Customisations

Button Content

• Button Label

• Button Link

• Open Link in New Tab

Default/Disabled State

• Background Color

• Text Color

• Border Color

• Border Width

Fill Animation

• Fill Mode

  • Radial

  • Linear Wipe

  • Centered

• Fill Color

• Hover Text Color

• Animation Style

• Cursor Following Toggle

🚀 Usage

1. Add Origin Button Pro to your Framer canvas.

2. Enter your button label and optionally provide a destination URL.

3. Choose one of the three fill animation modes.

4. Select your preferred animation style.

5. Customize the colors for the button, fill effect, hover text, and border.

6. Adjust other properties to achieve the desired look and feel.

7. Publish your project and enjoy the beautifully animated CTA button.

After completing your purchase, you will receive a link to the component.

Copy the URL and paste it into your Framer project to import it.