Animated Button Components

Dev Design Library indexes 417 Animated button components from 56 open-source UI libraries, with the most coming from Amicro Micro Transitions, MicroKit, Evil Buttons, UI Lab and Pixel Perfect. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the button components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Button components belong to the Actions group.

Showing 120 of 417, a mix from every library. Open a library to see all of its components.

• Bell ToggleReact Bits · ReactPill toggle that answers a press at three tempos: the bell rings on damped keyframes, the label blur-crossfades, and…
• Interactive Hover ButtonMagic UI · ReactA visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light…
• Link ButtonReact Spectrum · ReactA LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to…
• Bg Animate ButtonCult UI · ReactButton component with animated background effects and gradient transitions
• SwapArk UI · ReactAnimate between two visual states with smooth transitions.
• Delete With Smoky Dissolvetransitions.dev · HTML/CSSList item that dissolves into smoke when deleted.
• Animated hamburger / close toggle buttonReUI · ReactAnimated hamburger / close toggle button
• Apple Icon MorphAmicro Micro Transitions · ReactApple Icon Morph loading animation.
• AI Input SearchKokonut UI · ReactAI composer with a Tools menu (browse, investigate, draft, run code, reason), a model picker and a live trace that…
• show-moreIntent UI · Reactshow-more
• Bloom MenubeUI · ReactA button that morphs open into a menu and blooms iris-out from the center, the grid revealing in every direction with…
• Delete ButtonRare UI · ReactA delete button that asks for confirmation in place, no dialog needed.
• No API KeysSpectrum UI · ReactKey creation that reveals the secret once, masked, with a copy that confirms itself.
• Copy ButtonSpell UI · ReactA copy-to-clipboard button with blur transition effect.
• Corner ButtonVengeance UI · ReactAnimated corner dots & lines button
• ButtonFluid Functionalism · ReactAnimated button with variants (primary, secondary, tertiary, ghost), icon support, loading spinner, and fluid…
• Theme SwitcherUser Interface Wiki · React
• Link ButtonLaunch UI · React
• Expand Theme ToggleTheme Toggles · ReactAn animated theme toggle with an expanding sun-and-moon transition.
• FabPanel UI · React NativeThe floating action button — one action pinned over the content, with an optional dial of others behind it.
• Button 03 - Shine HoverShadcn Space · ReactShine Hover button component
• Antinomy ButtonPixel Perfect · ReactText label that slides right on hover as two gooey pills bloom and merge behind an action word, in subtle and solid…
• Copy EmailOpenSourceUI · ReactCopies the maintainer email on click — no mailto / mailbox popup. Hover shows “Click to copy”; after click shows…
• Analog Stickuselayouts · ReactA metallic stick that tilts into the press. Hover a quadrant and the cap leans, the shadow shifts, and the matching…
• Bookmark ToggleKinetics · HTML/CSSRibbon fills and drops in on save
• Cta Threecnblocks · SvelteCTA section with background gradient
• Interactive Hover ButtonAnimations (Svelte) · SvelteA button with an interactive hover effect featuring an expanding dot and sliding text animation with an arrow.
• Confetti ButtonBadtz UI · ReactA fun and interactive button that triggers a confetti explosion effect on click.
• Discover ButtonObsidianUI · React
• Blur Fade Theme TransitionGreatUI · ReactLight and dark theme toggle that switches the page with a blur and fade transition.
• Action ButtonNexvyn UI · ReactAn async-aware button with an idle → pending → success/error state machine, promise tracking, abort support, and live…
• Shimmer ButtonRewamp UI · ReactButton with a strip of light sweeping across it in a loop.
• ThreeDButtonEvil Buttons · ReactA minimal 3D button with a clean deck-style press and sliding click sheen.
• BubbleUpButtonSona UI · ReactThe `BubbleUpButton` component provides an interactive button with a fluid "bubble-up" animation effect when hovered…
• Shimmer ButtonWatermelon UI · ReactButton with a strip of light that sweeps across it on hover.
• Action buttonArc Library · ReactA compact button for frequent toolbar actions.
• Bookmark ButtonUI Lab · ReactFills from the bottom up and lands with a small squash.
• ButtonHextaUI · ReactButtons in every variant and size, with a built-in loading, success and error flow that skips the spinner for fast…
• Voice ButtonLocalMode · ReactA press-to-record / release-to-transcribe push-to-talk button with an explicit visual state machine: idle -> recording…
• AppearanceCojeev UI · ReactChoose from six coordinated palettes and adjust reading contrast across the application.
• Aurora Download ButtonMicroKit · ReactA layered blue download button with a luminous rim, directional shadow, and blended hover bloom.
• Hover slide arrowFLX UI · ReactCTA arrow nudges right on hover.
• Magnetic ButtonVelora UI · ReactLeans toward the cursor and springs back on leave.
• Link ButtonHalaska UI · React
• Back Link Chevronsv-particles · Svelte
• BloopSpaceUI · ReactCompact assistant orb with listen, think, and speak states, voice palettes, and audio input.
• Morph MenuSkecher UI · ReactA measured action menu that morphs between compact and expanded states with configurable directional movement.
• Particle Hover ButtonSora UI · ReactA wrapper that emits glowing, pooled particles from the cursor while hovering any button or link.
• Quick PayZAYX · React Native
• Theme ToggleCue Foundations · React
• Liquid ButtonLiquefy UI · ReactButton in liquid glass style: translucent, refracting the background.
• ButtonEaseUI · ReactButton with a quick press, hairline rings instead of borders, four variants, and a 44px tap area even at small sizes.
• Glass ButtonOpaline · ReactPill button made of liquid glass with a pointer-tracked highlight.
• Copy ButtonReactFrame · ReactA standalone copy-to-clipboard button with ghost/outline/solid variants, icon-only or labeled modes, a floating…
• Hover Border GradientAceternity UI · React
• Swapark-cn · ReactA shadcn-style swap component built with Ark UI primitives.
• Fuse ButtonReact Bits · ReactAction button whose done state carries its own undo on a burning fuse: press, the label crossfades to Undo, a hairline…
• Pulsating ButtonMagic UI · ReactAn animated pulsating button useful for capturing attention of users.
• Border Beam ButtonCult UI · ReactShadcn Button wrapped in Border Beam: animated border glow with compact icon and text variants
• Get Pro Buttontransitions.dev · HTML/CSS
• Go back link button with animationReUI · ReactGo back link button with animation
• Bookmark Save PillAmicro Micro Transitions · ReactInteractive Save / Saved state pill toggle with icon morph.
• AI VoiceKokonut UI · ReactVoice input with a scrolling waveform, then a take you can play back, discard or send.
• Theme TogglebeUI · ReactTheme toggle button that repaints the whole page through the View Transition API — a rectangle or circle clip-path…
• Notification BellRare UI · ReactAn iOS-style notification bell with an unread count badge.
• Circular NavbarSpectrum UI · Reactcomponent for the Circular Navbar
• Flow ButtonSpell UI · ReactA button with animated flowing dashed border on hover.
• Creepy ButtonVengeance UI · ReactButton with tracking eyes
• Button (Base UI)Fluid Functionalism · ReactAnimated button with variants (primary, secondary, tertiary, ghost), icon support, loading spinner, and fluid…
• Lightbulb Theme ToggleTheme Toggles · ReactAn animated theme toggle inspired by a lightbulb.
• Progress ButtonPanel UI · React NativePress and hold to confirm, with the wait drawn on the button.
• Button 06 - Animated BorderShadcn Space · ReactAnimated Border button component
• Bend Button FollowerPixel Perfect · ReactA rounded pill button with text that smoothly chases the cursor and warps with an air-friction bend on a WebGL plane.
• Bookmark Save ButtonOpenSourceUI · React
• Create Menuuselayouts · ReactA Start Creating pill that springs open into a list of create actions.
• Copy ButtonKinetics · HTML/CSSIcon crossfades to a check and the label swaps, then reverts
• Logocloud Twocnblocks · SvelteInteractive logo cloud with hover call-to-action
• Pulsating ButtonAnimations (Svelte) · SvelteA button component with a pulsating ring effect that expands and fades around the button.
• Glowing ButtonBadtz UI · ReactA visually distinct button component featuring a configurable, animated glow effect to highlight calls to action or…
• Aceternity ButtonGreatUI · React
• Clipboard FieldNexvyn UI · ReactA one-click install/copy field that morphs between the command and a success label using CSS grid fr tracks. JS only…
• Theme ToggleRewamp UI · ReactRewampUI ThemeToggle Component A smooth, tactile Light / Dark mode toggle switch with layout-interpolated spring…
• AshBurstButtonEvil Buttons · ReactA ringed dark button that glows like an ember on click and erupts ash that collides with it via Matter.js physics…
• ButtonSona UI · ReactA simple action button with subtle press feedback and reduced-motion support.
• Shimmer Button BaseWatermelon UI · ReactButton with a strip of light that sweeps across it on hover.
• Confirm morphArc Library · ReactA destructive button that morphs into an inline confirmation, a spinner, and a result with undo.
• Confetti ButtonUI Lab · ReactA click pops confetti; hold it and the fuse burns until the whole thing blows.
• ToggleHextaUI · ReactA button that stays on or off, with a fill that settles in when pressed, a clear hover-to-on step and icons that can…
• Copy ButtonLocalMode · ReactA copy-to-clipboard button that shows a 2-second Copied confirmation, disables itself when there is nothing to copy…
• Hero buttonCojeev UI · ReactTwelve tactile calls to action: living ink, paper, keys, tickets and small moments of motion around one native button.
• Circle Surface ButtonMicroKit · ReactA circular CTA whose dark surface expands into an orange fill.
• Copy to clipboardFLX UI · ReactIcon and label swap to a check on copy.
• Moving BorderVelora UI · ReactA light laps the button's border via offset-path.
• Copy Buttonsv-particles · Svelte
• Glass ButtonSpaceUI · ReactA glassmorphic extension of Button Squircle — backdrop blur, layered highlights and a hover shine sweep.
• Morphing Action DockSkecher UI · ReactA floating action dock that merges into one surface and expands into contextual actions.
• Sliding Chip ButtonSora UI · ReactA chip-style call-to-action link with a Motion-powered sliding label and rotating icon chips on hover.
• Liquid Icon ButtonLiquefy UI · ReactIcon-only button in liquid glass style.
• Copy ButtonEaseUI · ReactCopies text to the clipboard and trades its icon for a check for a moment, with a label or as a single icon.
• Glow Jump WidgetReactFrame · ReactA floating-action-button popup that opens a glowing 4-level platformer, jump between walls, dodge moving lava, and…
• Magnetic ButtonAceternity UI · React
• Hold ButtonReact Bits · ReactHold-to-confirm button whose liquid fill rises while pressed, snaps back on an early release and swaps its label…
• Rainbow ButtonMagic UI · ReactAn animated button with a rainbow effect.
• Copy ButtonCult UI · ReactButton that copies content to clipboard with feedback
• Gooey Plus Menutransitions.dev · HTML/CSS
• Theme toggle button with animated moon and sun iconsReUI · ReactTheme toggle button with animated moon and sun icons
• Button CameraAmicro Micro Transitions · ReactCamera button whose video icon morphs into the video-off icon.
• Magnet ButtonKokonut UI · ReactA call-to-action button wrapped in a field of iron filings that align to its magnetic field and lean toward your cursor.
• Action SwapbeUI · React
• Failed to LoadSpectrum UI · ReactA load failure with a copyable request id and a details panel that opens to fit.
• Pop ButtonSpell UI · ReactA playful 3D-style button with push-down animation effect.
• Generate ButtonVengeance UI · ReactAn interactive, animated button for AI generation tasks.
• Input CopyFluid Functionalism · ReactRead-only input with a copy-to-clipboard button and animated check feedback. Supports optional label and shape context.
• Spin Theme ToggleTheme Toggles · ReactAn animated theme toggle with a spinning sun-and-moon transition.
• Slide ButtonPanel UI · React NativeDrag across to confirm, with the distance drawn on the button.
• Button 17 - Blob FillShadcn Space · ReactCircle blob expands from bottom center on hover to fill the button
• Bevel ButtonPixel Perfect · ReactCompact dark button with a top-light to bottom-dark gradient stroke and layered inset bevel shadows for a tactile…
• Hold To Delete ButtonOpenSourceUI · React
• Delete Buttonuselayouts · ReactA confirmation button with smooth icon transitions.
• Hold To ConfirmKinetics · HTML/CSSPress and hold; a ring fills, release early to cancel

Libraries with Animated button components

• Amicro Micro Transitions
• MicroKit
• Evil Buttons
• UI Lab
• Pixel Perfect

Related categories

• Button Components
• React Button Components
• Tailwind CSS Button Components
• Svelte Button Components
• React Native Button Components
• shadcn/ui Button Components
• Animated Action Components
• Animated Toggle Button Components
• Animated Theme Toggle Components
• Animated Copy Button Components
• Animated Icon Button Components
• Animated CTA Button Components
• Animated Button Group Components
• Animated FAB Components
• Animated Like Button Components
• Animated Hold Button Components
• Animated Submit Button Components
• Animated Share Button Components
• Animated Send Button Components