---
title: "Join Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Buttons. About Join Button is an eye-catching call-to-action component featuring floating dust particles, a subtle corner paper-fold detail…"
canonical: "https://framer.elliotli.dev/component/join-button"
---

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

# Join Button

Floating dust particles

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

![Join Button preview image 1](https://framer.elliotli.dev/og/component/join-button/046c49a3eb88ad95/1600x1055.jpg)

## Summary

About Join Button is an eye-catching call-to-action component featuring floating dust particles, a subtle corner paper-fold detail, and interactive icon animations.

## Description

## **About**

**Join Button** is an eye-catching call-to-action component featuring floating dust particles, a subtle corner paper-fold detail, and interactive icon animations. Designed to draw immediate visual attention, it brings an extra touch of polish to high-converting landing pages.

## **What it does**

-   **Floating Particle Effect:** Subtle ambient light particles continuously float upward inside the button to create a lively background dynamic.
    
-   **Playful Corner Fold:** Features an animated top-right corner fold that shifts playfully on hover.
    
-   **Animated Spark Icon:** Includes an optional sparkle icon that scales and rotates smoothly when visitors hover over the button.
    
-   **Click Micro-Interaction:** Gently scales down on click (`active` state) to give visitors satisfying tactile feedback.
    

## **What you can customize**

Full control directly from Framer’s right-hand property panel — no coding needed:

-   **Text** — Button label (e.g., _"Join Now"_, _"Get Started"_, _"Claim Access"_)
    
-   **Link** — Destination page or URL (supports opening in a new tab)
    
-   **Icon** — Toggle the animated sparkle icon on or off
    
-   **Font** — Select any web or system typography family and weight
    
-   **Font Size** — Adjust text sizing in pixels (default: `14px`)
    
-   **Text Color** — Choose the label and icon color (default: `#FFFFFF`)
    
-   **Color Top & Bottom** — Customize the primary background gradient shift
    
-   **Radius** — Control corner roundness (default: `12px`)
    
-   **Height** — Set exact button height (default: `44px`)
    
-   **Padding H & V** — Finely adjust horizontal and vertical internal spacing
    

## **Need help?**

Questions or suggestions? Reach out anytime at [**karimsaif010@gmail.com**](mailto:karimsaif010@gmail.com) or on X [@karimsaif0](https://x.com/karimsaif0).

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

-   All · #7611

## Details

- **Author**: Karim Saif
- **Published**: 2026-07-22
- **Updated**: 2026-07-23
- **Added**: 2026-07-22
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow