---
title: "Shutter Button — Framer component · Best of Framer"
description: "$6.00 · Framer component · by DariStudio · Buttons. The button that opens like shutter"
canonical: "https://framer.elliotli.dev/component/shutter-button"
---

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

# Shutter Button

The button that opens like shutter

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

![Shutter Button preview image 1](https://framer.elliotli.dev/og/component/shutter-button/2c7d2fc007793fa6/1600x1200.jpg)

## Summary

The button that opens like shutter

## Description

At rest it's a perfectly ordinary button. On hover, the label splits along an invisible seam — top half slides up, bottom half slides down, like shutters opening — and a second message appears in the gap.

The split is real: each shutter carries one half of the same label, cut mid-letter, so the closed state reads as one seamless line and the opening feels physical. The hidden layer fades in with a soft scale, styled independently — pair a clean grotesk on the shutters with an italic serif underneath.

**Features:**

-   True split-label effect — letters cut in half along the seam
    
-   Two independent layers: label + reveal, each with its own font and colors
    
-   Four color controls: shutter fill, label, reveal fill, reveal text
    
-   Adjustable duration, radius, padding
    
-   Link control with new-tab toggle — renders as a real `<a>` when linked
    
-   Performance-safe: CSS-only animation, zero global listeners
    
-   One code file, works in any Framer project
    

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

-   All · #2791

## Details

- **Author**: DariStudio
- **Price**: $6.00
- **Published**: 2026-08-03
- **Updated**: 2026-08-03
- **Added**: 2026-08-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