---
title: "NextButton — Free Framer component · Best of Framer"
description: "Free Framer component · by mehul · Buttons. NextButton is a premium animated CTA button built for modern Framer websites."
canonical: "https://framer.elliotli.dev/component/nextbutton"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/NextButton

# NextButton

animated CTA with glow hover

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

![NextButton preview image 1](https://framer.elliotli.dev/og/component/nextbutton/d54cf020feef49ad/1600x1200.jpg)

## Summary

NextButton is a premium animated CTA button built for modern Framer websites.

## Description

NextButton is a premium animated CTA button built for modern Framer websites. It features smooth hover animations, triple-arrow motion, glow effects, color presets, custom palettes, full font control, and responsive padding so the button automatically adjusts without needing a fixed height.

Perfect for landing pages, hero sections, pricing pages, checkout flows, and any high-impact call-to-action.

**Features**

-   ✨ Animated triple-arrow icon (hover motion + glow)
    
-   🎨 4 color presets (Pink, Blue, Black, White)
    
-   🎨 Custom Color Mode (enter any hex / choose any color)
    
-   🔤 Full font control
    
-   🔠 Adjustable Font Size
    
-   ↔️ Padding X control
    
-   ↕️ Padding Y control (button auto height)
    
-   🔺 Icon Size control (independent from text)
    
-   🔘 Corner Radius control
    
-   🧩 Fully responsive with Hug contents
    
-   ⚡ Ripple + glow hover effect
    
-   🌙 Works with light & dark designs
    
-   🛠️ Clean, lightweight, and Marketplace ready
    

**How to Use**

1.  Add the component to your canvas.
    
2.  Set the frame to **Hug Contents** for perfect auto sizing.
    
3.  Adjust:
    
    -   Font (family, weight, size)
        
    -   Padding X / Padding Y
        
    -   Icon size
        
    -   Radius
        
4.  Choose a preset color or switch to **Custom** to use your own palette.
    
5.  Add your link via Framer’s interaction panel (Click → Open URL).
    

That’s it - your animated CTA is ready to use.

**Property Controls**

-   **Text**
    
-   **Font Family**
    
-   **Font Size**
    
-   **Icon Size**
    
-   **Padding X / Padding Y**
    
-   **Color Preset**
    
-   **Custom Colors**
    
-   **Background / Hover Background**
    
-   **Text Color / Outline / Shadow Color**
    
-   **Corner Radius**
    

**Refund Policy:** Due to the nature of digital products, refunds are generally not available after purchase. Exceptions may be made for duplicate purchases or technical issues that cannot be resolved.

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

-   All · #5020

## Details

- **Author**: mehul
- **Published**: 2025-12-01
- **Updated**: 2026-07-15
- **Added**: 2025-11-21
- **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