Icon Swap Button
button#gradient#pill#animation
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 Icon Swap Button
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.
Features
- Gradient pill button using design-system primary color blended with a complementary hue (a sky-azure gradient: azure blended with deepskyblue)
- Text slides up (
translateY(-100%)) and icon slides in from below (translateY(0)) on hover - Pure CSS hover — no JS required for the swap effect
- Single "Download" button with a Tabler download icon
- Subtle lift on hover via
translateY(-1px) - Active scale feedback (
scale(0.96)) - Prefers-reduced-motion support
- Accessible:
aria-labelon the button, keyboard activation
Accessibility
- Button label
aria-label="Download"on.bis-btn- Icon decorative
aria-hidden="true"on.bis-btn__iconwrapper- Theme toggle role
role="switch"witharia-checkedtoggled by JS- Theme toggle keyboard
- Responds to
EnterandSpacekeys - Focus indicators
:focus-visiblewith--ringoutline on all interactive elements- Reduced motion
prefers-reduced-motion: reducedisables all animations viatransition-duration: 0.01ms
Customise it with AI
Open Icon Swap 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
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
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
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
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
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
