---
title: "Gradient Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Murtuza Banani · Buttons. A ready-to-use modern gradient-border button built specifically for Framer."
canonical: "https://framer.elliotli.dev/component/gradient-button"
---

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

# Gradient Button

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

![Gradient Button preview image 1](https://framer.elliotli.dev/og/component/gradient-button/52c36527eb976ad8/1600x1200.jpg)

## Summary

A ready-to-use modern gradient-border button built specifically for Framer.

## Description

A ready-to-use modern gradient-border button built specifically for Framer. Since Framer doesn’t natively support gradient borders, this component uses a clever layered-frame structure to achieve clean, smooth gradient outlines while keeping everything fully editable.

The options help you create text buttons, left/right icon buttons, both side icon buttons, and icon-only buttons.

This button component will help you in creating multiple border-radius, like:

-   **Fully Rounded**
    
-   **Medium Rounded**
    
-   **Slightly Rounded**
    
-   **and Sharp**.
    

Just **copy and drop** the gradient border button component into your project. The button is neatly organized and easy to customize with your own text, icons, and colors.

Perfect for anyone who wants polished, modern gradient border buttons without rebuilding the structure from scratch.

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

-   All · #6684

## Details

- **Author**: Murtuza Banani
- **Published**: 2025-12-05
- **Updated**: 2025-12-05
- **Added**: 2025-11-26
- **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