---
title: "Multi State Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Till Janek · Buttons. Four states. One refined trigger."
canonical: "https://framer.elliotli.dev/component/multi-state-button"
---

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

# Multi State Button

Four states. One refined trigger.

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

![Multi State Button preview image 1](https://framer.elliotli.dev/og/component/multi-state-button/c0c15a38c84d9b13/1600x1200.jpg)

## Summary

Four states. One refined trigger.

## Description

MultiState Button is designed for modern websites that care about interaction quality.

### It includes four distinct variants

-   Two hover states
    
-   Two open states
    

Each transition is smooth and intentional. The motion feels subtle but confident, adding depth without distracting from the layout.

### Variable support for

1.  Font size
    
2.  Colors
    
3.  Link
    
4.  Gap
    

This allows you to adapt the button perfectly to your typography scale, spacing system, and brand identity.

### Ideal for

1.  Navigation triggers
    
2.  Overlay toggles
    
3.  Section reveals
    
4.  Minimal portfolios
    
5.  Studio and agency websites
    

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

-   All · #4200

## Details

- **Author**: Till Janek
- **Published**: 2026-03-06
- **Updated**: 2026-03-06
- **Added**: 2026-03-03
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything