Border Draw

Create a border draw button. A ghost button whose accent-colored border draws itself around the perimeter on hover, like a pen tracing the outline. Implementation: overlay an SVG the exact size of the button (absolutely positioned, pointer-events: none). Draw two rounded rects (rx matching the button's radius): a static faint one (hairline color) and the drawing one in the accent color with stroke-dasharray equal to the rect's perimeter (2 * (width + height) is a close-enough approximation) and stroke-dashoffset starting at that same value (fully hidden). On hover, transition stroke-dashoffset to 0 over 700ms with cubic-bezier(0.22, 1, 0.36, 1): the border sweeps around the shape. On mouse leave, transition back. Sync the label's color change (to accent, 300ms) with the draw. Keep the button background transparent so the drawing border is the event. Under prefers-reduced-motion, show the full accent border instantly on hover. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.