# Border Draw Button

> A minimal uppercase text button whose accent outline grows from zero at the top-left corner on hover, changing from a muted idle border to an accent border at a consistent weight.

- Category: Button
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Runway
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: border, outline
- Page: https://builder.atheros.ai/components/border-draw
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_border_draw/preview-3d263a583287.webp

## 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

## Keyboard shortcuts

- `Enter / Space` — Activate the focused button
- `Tab` — Move focus between interactive elements

## Common questions

**Which frameworks is Border Draw Button available in?**

Border Draw Button ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Border Draw Button free?**

Border Draw Button is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Border Draw Button support dark mode?**

Yes. Border Draw Button ships light and dark themes, both drawn from the Runway design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Border Draw Button live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/border-draw

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt