---
title: "Origin Button Pro — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Aviral Lakhanpaul · Buttons. Origin Button Pro is a premium animated button component for Framer that transforms ordinary call-to-action buttons into…"
canonical: "https://framer.elliotli.dev/component/origin-button-pro"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Origin Button Pro

# Origin Button Pro

Cursor origin hover button

[View on Framer](https://framer.com/marketplace/components/origin-button-pro/?via=elliot-li)

![Origin Button Pro preview image 1](https://framer.elliotli.dev/og/component/origin-button-pro/de0318507558fc16/1600x1200.jpg)

## Summary

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

## Description

**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.**

## Rank history [How rankings work →](/terms#rankings)

-   All · #1090

## Details

- **Author**: Aviral Lakhanpaul
- **Price**: $8.00
- **Published**: 2026-06-27
- **Updated**: 2026-10-28
- **Added**: 2026-06-27
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything