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

Gradient Button icon

About Gradient Button

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.

What we measured

Variants6
Props9
Breakpoints4

Measured 5 Sept 2026 Measured from the published package How we measure

Built something worth finding?

Submit a site, template, component or tool — any stack — and we will add it to the atlas.

Submit
Get component · Free

More

Submit

Filters

Style
Color
Loading colors…
Platform
Price
Works with

Explore the atlas

Loading catalogue…
Loading catalogue…
World Web Atlas

Hop on in

Save favourites, submit work and manage your profile.Save favourites and submit work.

Continue with GoogleContinue with Discord