Badge Arrow Button
AI Pass+button#badge#gradient#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 Badge Arrow Button
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.
Features
- Pill button with rounded-full border and surface background
- Gradient circle badge (primary to darkened-primary) positioned at the trailing edge
- On hover: pill fills with gradient, text becomes on-primary color, border disappears
- On hover: badge inverts to white background, arrow icon changes to gradient start color
- Dual SVG arrow technique — first icon slides out top-right, second slides in from bottom-left
- Active press nudges the button down 1px (
translateY) for tactile feedback - Prefers-reduced-motion support collapses all animations
Accessibility
- Button label
<button>hasaria-labelmatching its visible text- Native button semantics
- Plain
<button type="button">— press state is tracked viadata-pressed, neveraria-pressed, so it keeps announcing as a push button rather than a toggle - Keyboard activation
- Native
<button>activation onEnterandSpace— no JS key handling needed - Focus indicators
:focus-visiblewith--ringoutline on all interactive elements- Badge aria-hidden
- Arrow badge container has
aria-hidden="true"(decorative) - Reduced motion
prefers-reduced-motion: reducecollapses all transitions to 0.01ms
Customise it with AI
Open Badge Arrow 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
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
Warp Button
VanillaReact
A bordered button that jumps to warp speed on hover — a rotating gradient ring, two parallax layers of light-streaks scrolling past, a one-shot jump-flash, and a "Launch" → "Ready" warp text-swap. All driven by CSS hover and focus states, fully design-system agnostic.
#button#gradient#glow
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
Expand Button
VanillaReact
Circle icon button that morphs into a gradient pill on hover — the icon flies up as the label scales in, via a GPU-composited clip-path reveal.
#button#pill#gradient
Circle Expand Button
VanillaReact
A gradient accent circle with a contrasting chevron arrow that expands into a full pill on hover, sweeping under the label — a faithful port of the original circle-expand button, animated with GPU-friendly `clip-path` + `transform: scaleX()` instead of a width transition.
#button#gradient#transform
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
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
