Dual Fill Button

Show Preview
Dual Fill Button
Dual Fill Button

About Dual Fill Button

Dual Fill Button – A Call-to-Action Button with Two Hover Fills

Dual Fill Button is a bold call-to-action button with an arrow icon. Hover it and two color layers sweep up through the button one after the other, while the label and arrow roll to their new position. It adds a small, satisfying moment to any CTA.

How it works

  • On hover, a middle fill sweeps up first, then the hover fill.

  • The label and the arrow roll with the fill.

  • Links to any page or URL.

Easy to customize

  • Edit the label and the link.

  • Set the main fill, middle fill, hover fill, text color and arrow color.

  • Drop it into any Framer page and edit it from the properties panel or with your AI agent.