Glowing Border Trace Button

This is a Glowing Border Trace Button. It utilizes embedded SVG rectangles to create a moving neon stroke along the perimeter upon interaction. Its function is to provide highly visible, tactile feedback for primary actions without disrupting the core layout geometry or triggering expensive repaints.

Specs

• Weight: ~2 KB. Zero dependencies.
• Performance: High. Animates stroke-dashoffset and opacity strictly via CSS, bypassing layout recalculations.
• Theming / Customization: Fully controlled by CSS variables (--glow-line-color, --glow-blur-size, --animation-speed).
• Responsiveness: Adapts automatically to the button’s internal text dimensions and padding.
• Graceful Degradation: If JavaScript fails, the animated SVG border still functions perfectly, though it may lack exact corner-radius synchronization with the parent DOM element.

Anatomy

• HTML: A standard <button> wrapping text and an inline <svg> layer. The SVG houses two <rect> nodes (one sharp line, one blurred glow).
• CSS (SCSS): Maps interaction states (:is(:hover, :focus)) to SVG stroke properties. It heavily relies on stroke-dasharray and stroke-dashoffset to mask the lines.
• JS: A lightweight initialization script. It extracts the computed borderRadius from the CSS of the button and applies it directly to the SVG rx attribute, ensuring perfect alignment between the DOM box and the vector graphics.

Logic

The elegance of this snippet lies in normalizing the SVG vector length.

<rect pathLength="100" class="glow-line"></rect>

By explicitly setting pathLength="100" directly in the HTML, the complex mathematical perimeter of the rectangle (which changes based on fluid button width/height) is normalized to a fixed scale of 0 to 100. This eliminates the need for JavaScript to measure the exact pixel length for the stroke-dasharray animation. The CSS can simply animate the offset declaratively.

Feel

Precise and energetic. The stroke races around the button like an electrical current seeking a ground. Because it hooks into both :hover and :focus states natively, keyboard users receive the exact same high-fidelity visual reward as mouse users. The interaction feels tightly engineered and instantly responsive.