Border Draw Button

Features

• A runtime-built, path-normalized SVG rectangle overlays the button; its dash grows from 0 1 to 1 0 on hover, drawing the amber border from the top-left corner
• A second gray idle rectangle keeps a permanent outline at the same stroke width as the accent draw
• The label colour cross-fades to the amber accent as the border draws in, preserving the original orange-on-dark identity
• The draw rectangle uses pathLength="1", so its zero-length idle dash remains fully hidden at every responsive size without runtime measurement
• Springy scale(0.97) press feedback via a cubic-bezier(0.34, 1.36, 0.64, 1) transform
• Respects prefers-reduced-motion: reduce — all transitions collapse to 0.01ms

Accessibility

Button label

<button> has aria-label matching its visible text "Learn"

Decorative SVG

The runtime outline SVG carries aria-hidden="true"

Keyboard focus

The border draws on :focus-visible, mirroring hover for keyboard users

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce collapses all transitions to 0.01ms

Customise it with AI

Open Border Draw Button in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the button is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.