Hover & Interactions
Hover effects, micro-interactions, interactive elements and physics.
How do you create hover interactions that engage your visitors? These 48 hover effects cover every style: scale, glow, 3D tilt, content reveal and animated underlines. Essential for cards, buttons, links and images on any website.
Scale & Rotate
Scale up with a slight rotation.
Background Slide
The background slides from left to right.
Border Gradient
Gradient border that appears on hover.
Shine Effect
Light reflection that sweeps across the element.
Underline Expand
Line that expands from the center.
Icon Bounce
The icon bounces on hover.
Color Shift
Smooth color transition.
Blur Reveal
The blurred element becomes sharp on hover.
Shadow Inset
Glowing inner shadow.
Tilt 3D
Perspective tilt on hover.
Shutter Reveal
Shutter effect that opens on hover.
Glitch Hover
RGB glitch effect on hover.
Fill Up
Bottom-to-top fill with ease-quart curve. Inspired by Daily Delights.
Filter Animated
GPU-optimized CSS filter animation with will-change.
Spotlight Effect
Spotlight effect that follows the cursor on the element.
Magnetic Pull
The element is attracted to the cursor with a magnetic effect.
Elastic Scale
Scale up with elastic curve and natural bounce.
Gradient Shift
Animated gradient that speeds up on hover for a dynamic effect.
Like Heart
Like button with pop animation, propagation ring and colorful particle burst on click.
Bookmark Toggle
Save button with drop animation, background fill and color transition.
Submit Button
Submit button with circular morphing, loading spinner and success check animation.
Ripple Click
Material Design ripple effect on click. The wave spreads from the contact point and fades out.
Click to simulate
Pull to Refresh
Mobile pull-to-refresh simulation with rotating indicator, content displacement and loading spinner.
Notification Bell
Bell with shake animation, counter badge with pop-in and sliding notification toast.
Star Rating
Rating system with pop and rotation animation on each star. Dynamic labels based on the rating.
Switch with Icons
Switches with icons embedded in the knob, bounce animation and color change.
Copy to Clipboard
Copy button with icon transition (copy → check), success color and "Copied" tooltip.
Confetti Button
Button that triggers a colorful confetti burst with realistic gravity and rotation.
Paint Brush
Glowing brush that leaves a colorful trail.
Repel Particles
Particles that flee from the cursor.
Text Scramble
Text that decodes on hover.
Elastic Drag
Draggable element with elastic return.
Scratch Reveal
Scratch to reveal the hidden content.
Morph on Click
Shape that transforms on each click.
Live Typing
Each character appears with animation.
Sound Visualizer
Bars that react dynamically.
Magnetic Letters
Letters attracted to or repelled by the cursor.
Gravity Drag
Elements that fall with gravity once released.
Gravity Simulation
Balls subjected to gravity with bounce.
Elastic String
Elastic string that reacts to the cursor.
Magnetic Field
Particles attracted by a magnetic field.
Newton's Cradle
Pendulums with kinetic energy transfer.
Liquid Simulation
Drops that merge and separate.
Spring Physics
Elastic animation with spring effect.
Collision Detection
Balls that bounce off each other.
Cloth Simulation
Interactive cloth simulation.
Newton's Cradle
Newton's cradle with energy transfer.
Rope Physics
Interactive rope with physics simulation.