# Typewriter Button

> A button that erases its idle label character by character and types in a confirmation label, with a blinking cursor that tracks the end of the visible text and a gradient border that draws around the button on hover.

- Category: Button
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Triangulum
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: clip-path, animation
- Page: https://builder.atheros.ai/components/typewriter
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_typewriter/preview-51870a9271a5.webp

## Features

- Clip-path stepped transition erases the idle label right-to-left in 7 steps and types in the confirmation label left-to-right in 5 steps on hover
- Blinking cursor rendered as a 2px block element tracks the end of the visible text via two composed stepped translateX transforms, staying glued to the last typed character in both directions
- Label spans re-center in stepped sync with the erase/type phases so the visible text always stays optically centered in the button
- Gradient border ring (3px) draws clockwise from the top center via a conic-gradient mask sweep (registered `@property` angle transition) on hover and retracts cleanly on hover-out, a burnt-orange ring and cursor in light mode (#bf4400) and a glowing apricot ring and cursor in dark mode (#fb923c)
- Confirmation label rendered in the same orange accent (`--btw-accent`) as the cursor and border sweep
- Single button with text pair Prompt → Sent, centered on the page
- Pure CSS interaction — no JavaScript required for the button effect itself
- Dark/light palette preserving the component's own identity in both modes
- Prefers-reduced-motion collapses all animations and transitions to 0.01ms

## Accessibility

- **Button accessible name** — `<button>` has `aria-label="Run Prompt"` describing the action
- **Theme toggle role** — `role="switch"` with `aria-checked` toggled by JS on each activation
- **Keyboard activation** — Theme toggle responds to Enter and Space via `keydown` listener
- **Focus indicator** — `:focus-visible` with `var(--ring)` 2px outline on all interactive elements
- **Cursor decoration** — `.btw-btn__cursor` has `aria-hidden="true"` to hide from screen readers
- **Reduced motion** — `prefers-reduced-motion: reduce` collapses all animation/transition durations to 0.01ms

## Keyboard shortcuts

- `Enter / Space` — Activate focused button or toggle theme switch
- `Tab` — Move focus between interactive elements

## Common questions

**Which frameworks is Typewriter Button available in?**

Typewriter 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 Typewriter Button free?**

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

**Does Typewriter Button support dark mode?**

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

## Get the code

Preview Typewriter 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/typewriter

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