Typewriter Button
AI Pass+button#clip-path#animation
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Button component
About 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.
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
@propertyangle 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>hasaria-label="Run Prompt"describing the action- Theme toggle role
role="switch"witharia-checkedtoggled by JS on each activation- Keyboard activation
- Theme toggle responds to Enter and Space via
keydownlistener - Focus indicator
:focus-visiblewithvar(--ring)2px outline on all interactive elements- Cursor decoration
.btw-btn__cursorhasaria-hidden="true"to hide from screen readers- Reduced motion
prefers-reduced-motion: reducecollapses all animation/transition durations to 0.01ms
Customise it with AI
Open Typewriter 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.
Explore Other Components
View all
Spark Button
VanillaReact
An outlined button with a gradient border that sweeps diagonally from corner to corner on hover using a single clip-path transition and glow box-shadow — pure CSS, no JavaScript required for the effect.
#button#gradient#clip-path
Animated Update Progress Button
React
An interactive update button with smooth transitions, animated progress feedback, and a cancel action. Features a sleek pill-shaped design with subtle blue gradients and fluid motion.
#button#animation#design-system
Icon Swap Button
VanillaReact
A gradient pill button where the text label slides up and a download icon slides in from below on hover — driven entirely by GPU-composited `translateY` transitions with no layout recalculation.
#button#gradient#pill
Badge Arrow Button
VanillaReact
A pill button with a primary-color gradient circle badge that inverts on hover with a diagonal arrow slide animation — pure CSS transitions, no keyframes required.
#button#badge#gradient
Shine Button
ReactVanilla
A gradient button with a diagonal shine sweep animation that travels across the surface on hover, powered by GPU-composited `transform: translateX()` transitions — design-system agnostic.
#button#gradient#animation
Flip Button
VanillaReact
A 3D card-flip button that rotates on hover to reveal a confirmation state using CSS perspective and `rotateY(180deg)` transform — fully design-system agnostic.
#button#3d#transform
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
