Shutter Button

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