---
title: "FillShift Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Calvin Lai · Buttons. Expanding fill button with a move arrow"
canonical: "https://framer.elliotli.dev/component/fillshift-button"
---

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

# FillShift Button

Expanding fill button with a move arrow

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

![FillShift Button preview image 1](https://framer.elliotli.dev/og/component/fillshift-button/d7f76d2f191e5ed0/1600x1200.jpg)

## Summary

Expanding fill button with a move arrow

## Description

### About this Component

ButtonColorChange is a highly polished call-to-action button that brings motion and personality to your Framer projects. On hover, an accent-colored circle bursts from the left edge and floods the entire button in a smooth, springy fill. The label shifts to the right, swaps color, and the arrow box animates out while a second arrow enters from the left, all happening in one fluid, satisfying interaction.Built as a native Framer code component, it supports Framer's built-in page transitions out of the box. Pick any page from the Link To field and the button navigates with your project's transition animation, no extra configuration needed.

The component is fully resizable on the canvas and adapts to any layout. Drop it in, resize to fit, and control everything from the properties panel.

### Customizable Properties

-   **Label:** Edit the button text
    
-   **Font:** Full font control including family, size, weight, style, and letter spacing
    
-   **Background:** Set the default button background color
    
-   **Accent:** Set the hover fill color, also controls the arrow box and text color swap
    
-   **Radius:** Control button corner roundness
    
-   **Link To:** Native Framer link picker supporting internal pages, external URLs, mailto.
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-okqu38an-fB6ofXBgaMRPHnXXrT39trayTYzWwF)

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

-   All · #5625

## Details

- **Author**: Calvin Lai
- **Published**: 2026-05-04
- **Updated**: 2026-06-04
- **Added**: 2026-05-03
- **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