---
title: "Loop Motion Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Victor Ashasha · Buttons. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/loop-motion-button"
---

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

# Loop Motion Button

Free!

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

![Loop Motion Button preview image 1](https://framer.elliotli.dev/og/component/loop-motion-button/9016fd8702e51be7/1600x1200.jpg)

## Summary

Free!

## Description

## About this Component

The button renders a two-color gradient streak that continuously travels along the pill-shaped border. It drops straight into your Framer project and every visual property is editable directly from the right panel. No code required after install.

### How to Use

1.  Copy the component file into your Framer project's code components folder, or paste it directly into a new code component.
    
2.  The component appears at a default size of 200 × 56. Resize it freely; the gradient and layout will adapt automatically.
    
3.  Select the component and set the Link property in the right panel. It accepts internal Framer pages, external URLs, and anchor links.
    
4.  Update the Text property to change the button label. Font family, size, and weight are all controlled through the Font property using Framer's native font picker.
    
5.  All visual properties are in the right panel:Text, Font, Button color, Hover color, **Text** color, Gradient color, Border thickness, and Button padding.
    

### Component Settings

![Component settings](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-tipyxhsq-PaW5e6x0sxjOSAT4K2Pojb80z01hH7)Component settings![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-tipyxhsq-nRxoqhcCDAwsNcfN0oG2iYIZ8hGtQH)

### I actively maintain and update this component. If you have a feature request, please reach out.

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

-   All · #7494

## Details

- **Author**: Victor Ashasha
- **Published**: 2026-05-30
- **Updated**: 2026-05-30
- **Added**: 2026-05-17
- **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