Skip to content

MotionVaultAnimated UI vault

Motion Sites

Full animated website templates

Category

Site Templates→

Top tags

#landing #template #saas #hero #portfolio #terminal

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

React Bits

Advanced animated components

Category

Top tags

#card #navigation #menu #cards #3d #dashboard

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

Uiverse

Buttons, loaders, toggles

Category

Top tags

#form #button #input #loader #hover #toggle

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

Anime.js

Spring, drag & scroll motion

Category

Top tags

#canvas #text #scroll #hover #particles #glow

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

Aceternity UI

Glow cards, tilt, starfield…

Category

Top tags

#card #navigation #menu #cards #3d #dashboard

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

Motion Sites React Bits Uiverse Anime.js Aceternity UI Hall1246 · 375,921

1246 assets · 375,921 prompts copied

Buttons, loaders, toggles

UI Elements

Thousands of free open-source UI micro-elements — buttons, loaders, checkboxes, toggles, inputs. Pure HTML/CSS, grab the source and drop it straight into your project.

56

assets

Site Templates Components UI Elements Animations Search all →

56 assets tagged #button

Featured UI Elements⚛ TSX Live preview

Heart Burst Like Button

Toggle like with a springy heart pop and ten particle glyphs flying out in random directions.

HTMLCSSJavaScriptAdvanced

4.9k36.2k8.1kOpen

UI Elements⚛ TSX Live preview

Rotating Gradient Border Button

A conic-gradient border that spins around a dark pill button via @property angle animation.

HTMLCSSReactAdvanced

4.1k33.8k7.6kOpen

UI Elements⚛ TSX Live preview

Material Ripple Button

Click anywhere and a white ripple expands from the exact click point, scaled to overflow the button.

HTMLCSSJavaScriptAdvanced

3.1k25.9k6.1kOpen

UI Elements⚛ TSX Live preview

Morphing Liquid Blob Button

Organic blob CTA whose border-radius melts and follows the cursor, with a rotating sheen on hover.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Shimmer Button with Loading → Success States

Tri-state CTA: idle, animated shimmer sweep with ellipsis dots while loading, then a morphing green ✓ success state.

HTMLCSSJavaScriptAdvanced

Featured UI Elements⚛ TSX Live preview

Flowing gradient border buttons

Animated gradient border that streams around the label; inner chip clears to reveal the full flow on hover.

HTMLCSSReactAdvanced

UI Elements Live preview

Stroke-draw success checkmark

On action the button draws a circle then a check via stroke-dashoffset animation and tints green — completion feedback.

HTMLCSSJavaScriptModerate

Featured UI Elements⚛ TSX Live preview

Neon Pulse Button · Ultra Violet

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Ultra Violet palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Cyber Lime

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Cyber Lime palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Sunset Amber

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Sunset Amber palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Rose Gold

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Rose Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Ocean Sky

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Ocean Sky palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Mint Breeze

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Mint Breeze palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Candy Pink

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Candy Pink palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Royal Gold

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Royal Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Rose Gold

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Rose Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Ocean Sky

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Ocean Sky palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Mint Breeze

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Mint Breeze palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Candy Pink

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Candy Pink palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Royal Gold

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Royal Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Crimson Heat

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Crimson Heat palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Deep Indigo

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Deep Indigo palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Aurora Teal

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Aurora Teal palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Candy Pink

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Candy Pink palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Royal Gold

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Royal Gold palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Crimson Heat

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Crimson Heat palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Deep Indigo

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Deep Indigo palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Aurora Teal

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Aurora Teal palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Mono Pearl

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Mono Pearl palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Ultra Violet

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Ultra Violet palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Cyber Lime

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Cyber Lime palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Deep Indigo

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Deep Indigo palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Aurora Teal

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Aurora Teal palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Mono Pearl

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Mono Pearl palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Ultra Violet

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Ultra Violet palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Cyber Lime

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Cyber Lime palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Sunset Amber

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Sunset Amber palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Rose Gold

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Rose Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Ocean Sky

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Ocean Sky palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Glow Button

Primary button with neon glow, hover lift and active press effect.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Gradient Border Button

Button with animated gradient border using a rotating conic background.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Shimmer Button

Button with a diagonal light sweep shimmer across its surface on hover.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Input Group Button

Input with attached action button (e.g. copy or search).

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Back-to-Top Button

Floating button that appears on scroll and smooth-scrolls up.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Copy Button Feedback

Copy-to-clipboard button with checkmark success state.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Icon Button Circle

Circular icon-only button with focus ring and active scale.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Loading Button State

Button that shows a spinner while busy, then success check.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Neon CTA Button Duo

Two gradient buttons with neon glow, hover lift and press scale used side by side.

HTMLCSSJavaScriptAdvanced

Showing 48 / 56

MotionVault

The treasure vault for animated web design. Full site templates, advanced components, UI micro-elements and animation snippets — each with live preview, source code and an AI prompt. Inspired by Motion Sites, React Bits, Uiverse, Anime.js and Aceternity UI.

1246 items582k stars376k copies

Vault sections

Site Templates
Components
UI Elements
Animations

More

Explore everything
Favorites
Submit
Privacy
Roadmap
Support
Accessibility
Built with Next.js · Tailwind

© 2026 MotionVault — curated for builders who ship.·🎲 Surprise me·v2.0.0

UI Elements — Animated web elements with AI prompts · MotionVault