Dropdown Floating Button
AI Pass+animation#button#clip-path#dropdown
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.
Animation component
About Dropdown Floating Button
A floating action button that morphs into a dropdown quick-actions menu via GPU-composited `clip-path` animation — fully design-system agnostic.
Features
- Clip-path morph animation from a design-system-shaped FAB to its menu panel (GPU-composited, no layout thrash)
- Staggered item reveal with per-child transition delays (110ms–250ms in 35ms steps); items fade out without delay on close
- Plus icon rotates 135° and cross-fades out during open
- Content-driven panel height — no fixed dimensions
- Drop-shadow on anchor follows the child's painted clip-path shape
- Click-outside and Escape key close the menu
- Responsive design with prefers-reduced-motion support
Accessibility
- Trigger state
aria-expandedtoggled on open/close- Trigger label
aria-label="Open quick actions"- Close button
aria-label="Close menu"- Dismiss
- Escape key and click-outside close the menu
- Focus indicators
:focus-visiblewith--ringoutline on all interactive elements- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Dropdown Floating Button in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the animation 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
Audio Wave
VanillaReact
A DJ-deck audio wave visualizer — an inset LED window holds a multi-band spectrum, with a backlit play key, three speed keys, and an adjustable bar count.
#animation#wave
Typewriter Button
VanillaReact
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.
#button#clip-path#animation
Profile Dropdown Menu
ReactVanilla
A profile dropdown led by an identity header for the signed-in account, with quick actions and soft key-chip shortcut hints, a What's new discovery item, a switch-account list of the other accounts with a hover switch arrow, a dark mode toggle row grouped above the error-weighted sign-out action — fully token-driven and design-system agnostic.
#account-switcher#dark-mode#responsive
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
Classic Checkbox Group
VanillaReact
A minimal animated checkbox group rendered from a data array, with a drawn tick animation and a clean single-column list — fully token-driven and design-system agnostic.
#checkbox#form
Modal — Pendulum
VanillaReact
An accessible motorsport dialog that swings open on a 3D arc, with angular details, a specification grid, keyboard support, and responsive themes.
#modal#dialog#animation
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
