---
title: "Rainbow Button Hq — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Plaiter HQ · Buttons. A button with animated rainbow border"
canonical: "https://framer.elliotli.dev/component/rainbow-button-hq"
---

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

# Rainbow Button Hq

A button with animated rainbow border

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

![Rainbow Button Hq preview image 1](https://framer.elliotli.dev/og/component/rainbow-button-hq/65b8fbf00d89d2f6/1600x1200.jpg)

## Summary

A button with animated rainbow border

## Description

Rainbow Button is a visually striking call-to-action component featuring a continuously animated gradient border that flows smoothly around the button. It supports both inside and outside borders, optional rainbow shadow effects, and fine-grained control over spacing, typography, and animation speed.

Designed for modern interfaces, this button works perfectly for hero sections, pricing pages, and any interaction that needs to stand out while remaining lightweight and responsive.

## Key Features

-   Animated rainbow gradient border
    
-   Inside or outside border positioning
    
-   Optional animated rainbow shadow
    
-   Custom border sides support
    
-   Adjustable animation speed
    
-   Fully customizable typography and padding
    
-   Link and click handler support
    

## Use Cases

-   Primary call-to-action buttons
    
-   Hero sections
    
-   Pricing and checkout pages
    
-   Product launches
    
-   High-impact marketing pages
    

## Best Practices / Tips

-   Use slower animation speeds for premium, elegant effects
    
-   Pair with dark backgrounds for maximum contrast
    
-   Disable the shadow for minimal UI designs
    

## What’s Included

-   One Rainbow Button component
    
-   Animated gradient border system
    
-   Shadow and border position controls
    
-   Link and interaction support
    

## Who It’s For

-   Framer designers and builders
    
-   Marketing and landing pages
    
-   Product and SaaS websites
    
-   No-code creators needing high-impact CTAs
    

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

-   All · #8235

## Details

- **Author**: Plaiter HQ
- **Price**: $10.00
- **Published**: 2026-04-27
- **Updated**: 2026-04-27
- **Added**: 2026-01-11
- **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