Button Effects
Interactive button animations and micro-interactions
Ripple Effect
Material Design click ripple
When to useEssential for touch feedback on mobile apps and Material Design interfaces.
Fill Animation
Background fills on hover
When to useGreat for navigation buttons, CTAs, or any button that needs visual state feedback.
3D Press
Button depresses on click
When to usePerfect for game UIs, arcade buttons, or adding tactile feel to primary actions.
Shake on Error
Invalid input triggers shake
Loading State
Button with states
When to useEssential for form submissions, API calls, or any async operation feedback.
Add to Cart
Cart button animation
When to useE-commerce sites for confirming items added to shopping cart.
Download Progress
Button with progress
When to useFile downloads, software installers, or any action with trackable progress.
Border Animation
Animated border stroke
Floating Action
Expandable FAB
When to usePerfect for mobile apps with primary actions that need quick access from any screen.
Neon Glow
Cyberpunk neon effect
When to useIdeal for gaming sites, nightlife apps, or futuristic/cyberpunk themed interfaces.
Liquid Fill
Water wave fill animation
When to useGreat for progress indicators, loading states, or creative CTAs that need visual interest.
Gradient Border
Animated rainbow border
When to usePerfect for premium features, special offers, or when you want to highlight an exclusive action.
Slide Text
Text slides on hover
When to useGood for navigation buttons where you want to show a secondary label or icon on interaction.
Pulse Ring
Expanding pulse rings
When to useExcellent for call-to-action buttons that need to draw continuous attention without being annoying.
Neumorphic
Soft UI pressed effect
When to useBest for minimalist interfaces, settings panels, or calculator-style UIs with a modern feel.
Confetti Burst
Celebration particles
When to usePerfect for success states, achievements, rewards, or any celebratory user action.
Rotating Icon
Icon spins on hover
When to useGreat for refresh buttons, settings, or any action that implies rotation or change.
Typewriter
Text types on click
When to useUse for confirmation buttons where you want to show a message after the action completes.
Underline Slide
Animated underline
When to useIdeal for text links, navigation items, or minimal button styles in clean interfaces.
Scale Up
Grows on hover
When to useSimple and effective for any interactive element that needs subtle feedback on hover.
Flip Card
3D flip reveal
When to useGreat for reveal interactions, before/after states, or card selection interfaces.
Front
Shadow Pop
Shadow lifts on hover
When to useBest for card-like buttons or elements that need to feel clickable and interactive.
Glitch Effect
Cyberpunk glitch animation
When to usePerfect for tech/hacker themes, error states, or edgy brand aesthetics.
Elastic
Bouncy spring animation
When to useGreat for playful interfaces, games, or when you want to add personality to interactions.
Morphing Shape
Shape transforms on click
When to useIdeal for state changes like follow/unfollow, add/remove, or expand/collapse actions.
Spotlight
Light follows cursor
When to useGreat for premium features, highlighted CTAs, or creating a sense of discovery.
Text Scramble
Matrix-style text effect
When to usePerfect for tech themes, password/security features, or creating mystery/intrigue.
Particle Trail
Sparkles follow cursor
When to useGreat for magical/fantasy themes, premium features, or adding delight to interactions.
Radar Ping
Pulsing radar animation
When to useLocation-based apps, notifications, or showing something is active/live.
Swipe Action
Drag to confirm
When to useDelete confirmations, unlock actions, or important irreversible operations.
Swipe to confirm →
→
Double Click
Two clicks to confirm
When to useDangerous actions like delete, or when you want to prevent accidental clicks.
Hold to Activate
Press and hold
When to useEmergency actions, power buttons, or confirming critical operations.
Countdown
3-2-1 animation
When to useLaunch actions, game starts, or building anticipation before an action.
Squeeze
Squishes horizontally
When to usePlayful interfaces, cartoon-style UIs, or when you want exaggerated feedback.
Jelly Wobble
Wobbly bounce animation
When to useFun/casual apps, games, or adding personality to interactions.
Color Cycle
Changes color on click
When to useTheme selection, mood indicators, or visual feedback for repeated actions.
Slot Machine
Spin to win animation
When to useGames, gamification elements, or randomized selections.
🎰🎰🎰
Reveal Content
Expands to show content
When to useShow more buttons, expandable FAQs, or hidden content sections.
Soundwave
Audio visualizer animation
When to usePlay/pause buttons, voice messages, or audio-related interactions.
Bookmark Fold
Corner fold animation
When to useSave/bookmark actions, page marking, or content saving features.
Liquid Blob
Morphing blob shape
When to useCreative portfolios, artistic sites, or organic/natural themed interfaces.
Stack Cards
Cards fan out on click
When to useSocial share buttons, action menus, or grouped action selection.
Neon Flicker
Flickering neon sign
When to useRetro/vintage themes, bar/restaurant sites, or nostalgic aesthetics.
Loading Dots
Animated ellipsis
When to useSimple loading states, processing indicators, or waiting animations.
Arrow Transform
Arrow becomes checkmark
When to useSend buttons, form submissions, or any action that completes a process.
Stretch Expand
Button stretches wider
When to useAdding items to lists, expanding selections, or revealing more options.
Heartbeat
Pulsing heartbeat rhythm
When to useHealth apps, emotional CTAs, or showing something is alive/active.
Camera Shutter
Photo capture animation
When to useCamera apps, screenshot features, or any capture/record action.
Save - Checkmark Fill
Green checkmark fills on save
Save - Upload Arrow
Arrow animates upward
Save - Progress Bar
Filling progress indicator
Save - Spinner to Check
Loading spinner becomes checkmark
Save - Cloud Upload
Cloud icon moves up
Save - Floppy Disk
Retro floppy disk spin
Save - Pulse Success
Success pulse animation
Save - Slide Drawer
Text slides in drawer
Save - Flip Text
3D text flip effect
Save - Bookmark Drop
Bookmark icon drops down
Save - Download Bar
Bottom progress bar
Save - Lock Secure
Lock icon secures save
Save - Ripple Success
Success ripple expands
Save - Expanding Check
Checkmark expands out
Save - Gradient Shift
Gradient color transition
