Flip Button
AI Pass+button#3d#transform#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 Flip Button
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.
Features
- 3D card-flip effect using CSS
perspectiveandrotateY(180deg)— GPU-composited, no layout thrash - Front face shows "Confirm", back face shows "Done" with gradient background
transform-style: preserve-3dandbackface-visibility: hiddenfor correct depth rendering- Single button centered on the page — no wrapper panel or showcase grid
- Hover and focus-visible both trigger the flip
- Active state adds
scale(0.95)to the flipped position for tactile feedback - Responsive design with prefers-reduced-motion support
Accessibility
- Button label
<button>hasaria-label="Confirm"- Theme toggle state
role="switch"witharia-checkedtoggled by JS- Keyboard activation
- Theme toggle responds to Enter and Space
- Focus indicators
:focus-visiblewith--ringoutline on all interactive elements- Flip on focus
.bfl-btn:focus-visible .bfl-btn__innertriggers the flip- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Flip 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
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
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
Keycap Buttons
VanillaReact
Three vintage mechanical-keyboard keycaps in three finishes — with domed tops, tall front skirts, and a deep physical press: the cap sinks, the skirt compresses, and the contact shadow tightens, all via GPU-friendly transforms and static shadow swaps.
#button#keyboard#3d
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
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
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
