Animated Hold Button Components

Dev Design Library indexes 14 Animated hold button components from 11 open-source UI libraries, with the most coming from React Bits, Kinetics, Evil Buttons, Spectrum UI and Sona UI. 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 hold button components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Hold button components belong to the Actions group.

• Fuse ButtonReact Bits · ReactAction button whose done state carries its own undo on a burning fuse: press, the label crossfades to Undo, a hairline…
• Hold ButtonKokonut UI · ReactPress and hold to confirm, with a fill that drains back on early release and a drawn check on completion.
• Hold Action ButtonbeUI · React
• Hold to ConfirmSpectrum UI · ReactA press-and-hold confirmation button for destructive actions with a filling progress ring, spring-back on early…
• Hold To Delete ButtonOpenSourceUI · React
• Hold To ConfirmKinetics · HTML/CSSPress and hold; a ring fills, release early to cancel
• DemonicButtonEvil Buttons · ReactA hold-to-summon button: keep pressing to raise ridged devil horns from behind it while a canvas fire builds into a…
• Hold To Delete ButtonSona UI · ReactA hold-to-confirm destructive button with pointer capture, keyboard activation, cancellation, and reduced-motion…
• Hold to confirmArc Library · ReactConfirm a destructive action by holding, not tapping.
• Hold To DeleteUI Lab · ReactFills slowly while you commit to it, snaps back the moment you let go.
• Hold To ConfirmEaseUI · ReactButton for destructive actions that fills while you hold it and only fires once the fill completes. Letting go early…
• Hold ButtonReact Bits · ReactHold-to-confirm button whose liquid fill rises while pressed, snaps back on an early release and swaps its label…
• Hold To TalkKinetics · HTML/CSSA live waveform blooms while you hold, then commits on release
• HoldButtonEvil Buttons · ReactA hold-to-confirm button whose inner fill grows from 0 to 100%; release early to shake and abort, hold to the end to…

Libraries with Animated hold button components

• React Bits
• Kinetics
• Evil Buttons
• Spectrum UI
• Sona UI

Related categories

• Hold Button Components
• React Hold Button Components
• Tailwind CSS Hold Button Components
• Animated Action Components
• Animated Button 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 Submit Button Components
• Animated Share Button Components
• Animated Send Button Components