---
title: "Pill Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Minhal Jafar · Buttons. Here's a polished, detailed marketplace description: Animated Gradient Pill Button — Framer Component Give your website a CTA that actually…"
canonical: "https://framer.elliotli.dev/component/pill-button"
---

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

# Pill Button

Interactive colored pill button

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

![Pill Button preview image 1](https://framer.elliotli.dev/og/component/pill-button/64ae4e195c9880d4/1600x1200.jpg)

## Summary

Here's a polished, detailed marketplace description: Animated Gradient Pill Button — Framer Component Give your website a CTA that actually grabs attention.

## Description

Here's a polished, detailed marketplace description:

**Animated Gradient Pill Button — Framer Component**

Give your website a CTA that actually grabs attention. This pill-shaped button component features a smooth, continuously rotating gradient border animation that adds a subtle but premium sense of motion to your call-to-action — without feeling distracting or overdone.

**What makes it special:**

The rotating border effect creates a glowing, animated outline that loops seamlessly around the button, instantly making your CTA feel more dynamic and modern compared to a static button. It's the kind of small detail that makes a website feel polished and intentional.

**Fully customizable:**

Every color is yours to control. Adjust the background color, the gradient colors used in the rotating border, and instantly create a button that matches your brand palette. Whether you're building a SaaS landing page, a portfolio, an agency site, or an ecommerce store — just swap the colors and the button adapts to fit your design system in seconds.

**Built-in interactions:**

This isn't just a static design — it comes with thoughtful micro-interactions baked in. On hover, the button responds with a smooth, satisfying transition that gives users visual feedback before they even click. On press, a tactile pressed-down effect makes the interaction feel real and responsive, adding to the overall premium feel of your site.

**Why you'll love using it:**

No need to build animated buttons from scratch or wrestle with custom code. Drop this component into your Framer project, plug in your brand colors, and you have a CTA button that looks like it was custom-built by a design team — ready to drive clicks, sign-ups, and conversions.

**Perfect for:** Landing pages, hero sections, pricing pages, newsletter sign-ups, product launches, and anywhere you need a CTA button that stands out and feels alive.

Lightweight, easy to customize, and built to make your website feel more premium in seconds.

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

-   All · #7241

## Details

- **Author**: Minhal Jafar
- **Published**: 2026-06-18
- **Updated**: 2026-06-18
- **Added**: 2026-06-18
- **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