Shutter Button

The button that opens like shutter

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 when linked Performance-safe: CSS-only animation, zero global listeners One code file, works in any Framer project

The button that opens like shutter