AI CSS Animations

CSS Icon Hover Effects

67 CSS icon hover effects: social icon rows, animated icon buttons, bounces, spins, fills and tooltips, all with inline SVG and no icon font.

Icon Slide Button

The arrow nudges to the right when you hover, which is enough to say 'this goes somewhere'. Works for any inline icon, not just an arrow.

button · icon · tailwind

Arrow Link

A 'Read more' link whose arrow slides right on hover. The lightest possible affordance for a text link that leads somewhere.

link · icon · minimal · tailwind

Wiggle Icon

An icon button that wiggles like a ringing bell when hovered. The animation only runs during hover, so it never distracts while idle.

icon · playful · button

Spin Icon Button

A settings cog that turns a half rotation on hover and turns back when you leave. A transition on transform, so the return trip is as smooth as the outbound.

icon · button · minimal

Profile Card Social Icons Hover

A profile card whose role line slides away and a row of social icons springs up in its place, one after another. The swap happens in a fixed-height slot, so the card never resizes.

card · social · reveal

Bouncing Icon Card Hover

A feature card whose icon tile fills with the accent and does one squash-and-stretch hop. Each keyframe sets its own easing, so the jump slows at the top and lands with a squash.

card · icon · playful

Testimonial Card Hover

A customer quote card: the big quote mark swings into the accent color and the five stars pop in one after another. The star shape is a clip-path polygon, so there is no icon font.

card · icon · playful

Arrow Link Card Hover

A whole-card link whose corner arrow flies out to the top right while a fresh one slides in from the bottom left, and the circle behind it fills. Two copies of one SVG do the swap.

card · link · icon

Notification Card Hover

A notification row that nudges sideways as its bell rings with a damped swing, and the timestamp trades places with a dismiss button. The bell pivots from its top, like the real thing.

card · icon · playful

Music Player Card Hover

A track row where the cover art dims, a play button springs up over it and the little equalizer comes alive. Each bar has its own duration, so the bounce never looks like a loop.

card · icon · overlay

Animated Dashed Border Card Hover

A file drop zone whose dashed outline starts marching and turns accent on hover while the upload arrow bobs. The dashes live on an SVG rect with pathLength 100, so the loop has no seam.

card · border · icon

Lightbox Icon Image Hover

An accent tint washes over the photo and a round magnifier button spins in with a small overshoot, the usual cue that a click opens a lightbox. The icon is inline SVG.

image · overlay · icon

External Link Arrow Hover

The north-east arrow beside an outbound link shoots out of its badge while a fresh copy slides in from the opposite corner, and the badge fills in. Two SVG arrows in a clipped circle.

link · icon

Arrow Reveal Footer Link Hover

Quiet footer links that brighten on hover while an arrow slides in from the left and nudges the label over. The arrow is absolutely placed, so the list never reflows.

link · icon · minimal · tailwind

Arrow Underline Link Hover

An underline draws under the text, runs on past the last letter and grows an arrowhead, so the link points where it goes. The head is a rotated border corner that waits for the line.

link · underline · icon

Waving Hand Link Hover

A waving hand emoji pops out beside a contact link on hover and keeps waving from the wrist. The pop is a transition on transform, the wave animates the separate rotate property.

link · icon · playful

Icon Pop Nav Hover Effect

A text-only menu where hovering an item pops its icon up above the label with a springy bounce. Each icon is an inline SVG parked at scale zero, so the labels never shift.

menu · icon · playful

Social Icons Fill Up Hover

A row of outlined round social buttons whose fill rises from the bottom like liquid, with a domed edge that rolls as it climbs. One oversized pseudo-element per link.

social · icon · fill

Social Icons Flip Hover

Rounded social tiles that spin a full turn on the Y axis when hovered and land in solid color. The color swaps while the tile is edge-on, so the change is hidden by the turn.

social · icon · 3d

Bouncing Social Icons Hover

Solid social buttons that hop in place while hovered, with a squash on take-off and landing and a floor shadow that shrinks as the icon rises. Playful footer or contact row.

social · icon · playful

Social Icons with Tooltip Hover

Each social button fills in and pops a small label above itself with a springy overshoot. The label is real text inside the link, so it doubles as the accessible name.

social · icon · reveal · tailwind

Share Button Expand Hover

A round share button that bursts into a row of share targets on hover, two to each side, springing out from center with the far ones a beat later. Works on focus too.

social · icon · reveal

Gradient Ring Icon Hover

A gradient ring pops out around a social icon and keeps spinning while you hover, like a story ring. The ring is a masked conic gradient on a pseudo-element; the icon shrinks to leave a gap.

social · icon · gradient

Diamond Social Icons Hover

Outlined social icons set in diamonds that swing upright into filled squares on hover, while the glyph inside counter-rotates so it never tilts. A spring curve adds a small overshoot.

social · icon · fill · tailwind

Heart Like Button Hover

An outlined heart that fills, throws out a ring of dots and keeps a lub-dub heartbeat while hovered. The dots are box-shadows on one pseudo-element, scaled outward.

icon · social · playful · fill

Thumbs Up Like Icon Hover

A thumbs up that dips back, then flicks up with overshoot and floats a +1. The anticipation comes from a back-in-out cubic-bezier on one transition, so leaving is animated too.

icon · social · playful

Hamburger Menu to X Hover

Three bars that slide together and then cross into an X, while the middle bar shrinks away. Separate translate and rotate transitions run in sequence, reversed on the way back.

icon · menu · minimal

Plus Icon Rotate Hover

A round add button whose plus spins three eighths of a turn into an X with a springy overshoot, while the button swells and its shadow deepens. The classic FAB hover.

icon · button · minimal · tailwind

Download Icon Hover

The arrow drops into the tray and fades, the tray gives a little under the weight, then a fresh arrow falls in from the top and settles. Loops for as long as you hover.

icon · button · minimal

Trash Can Icon Hover

A trash can whose lid lifts and tips open on a hinge at one end, with a spring overshoot, as the button turns solid. Good for a delete action that should feel deliberate.

icon · button · playful

Copy Icon Hover

The two sheets of a copy icon spread apart on hover and a third copy slides out between them, so the icon literally shows duplicates. Each sheet is filled to hide the one behind it.

icon · button · minimal

Paper Plane Send Icon Hover

The paper plane pulls back, shoots off the top right corner and glides back in from the bottom left. The button clips it with overflow hidden, so it leaves and returns cleanly.

icon · button · playful

Back to Top Button Hover

The arrow slides up and out of the circle while an identical arrow rises in from below, reading as motion toward the top. Two stacked icons in one grid cell, clipped by the button.

icon · button · tailwind

Expanding Icon Button Hover

A round icon button that stretches into a pill and slides its label out to the right. The label column animates from 0fr to 1fr, so no width needs to be hard-coded.

icon · button · reveal

Play Button Pulse Hover

A round play button with a soft halo at rest that sends out two staggered ripples while hovered, like a sonar ping. The ripples are two spans on the ping keyframes Tailwind uses.

icon · button · glow · tailwind

Star Icon Sparkle Hover

A favorite star that fills and turns one point with overshoot while three small sparkles twinkle around it in turn. Each sparkle is a span cut into a four-point star with clip-path.

icon · shine · playful · fill

Eye Icon Blink Hover

An eye icon that blinks when hovered, then glances left and right before looking back at you. The lid is a scaleY squash on the whole eye; the pupil moves on its own keyframes.

icon · playful · minimal

Padlock Unlock Icon Hover

The shackle lifts out of the padlock body, then swings open around one leg, faked in 2D by flipping it through scaleX. Separate translate and scale transitions run in sequence.

icon · button · minimal

Add to Cart Icon Hover

A parcel drops into an empty shopping cart and the cart rocks on its wheels under the weight before settling. The parcel lives inside the cart group, so it rides the rock with it.

icon · button · playful

Bookmark Icon Fill Hover

A bookmark that floods with color from the top down, like ink running into the ribbon, and stretches a touch as it fills. The fill is a copy of the path revealed with clip-path inset.

icon · fill · minimal

Sun to Moon Icon Hover

A theme toggle where the sun spins away and shrinks as the moon spins in, and the button dims to night. Two icons share one grid cell and trade places with a springy rotate and scale.

icon · button · playful

Envelope Open Icon Hover

The envelope flap folds up and open, then a letter slides out of the pocket. The flap is two shapes, one in front and one behind, handed off at the fold so the layering stays right.

icon · social · reveal

Notification Badge Icon Hover

A quiet dot on the bell grows into an unread count with a springy pop while the clapper swings. The dot and the count are one element: the number only turns visible as it scales up.

icon · button · playful

Search Icon Hover

The magnifier grows a little, catches a glint on its lens and circles in a small loop as if it were scanning the page. The loop is an offset rotate that keeps the handle pointing the same way.

icon · button · minimal

Chat Bubble Typing Icon Hover

A chat bubble that swells from its tail and sets the three dots inside bouncing like a typing indicator. The dots are filled circles in the same SVG with staggered animation delays.

icon · social · playful

Checkmark Draw Icon Hover

A faint circled check that draws itself in: the ring traces around from the top, then the tick strokes in. A pathLength of 1 on each shape makes the dash math the same for both.

icon · minimal · reveal

Chain Link Icon Hover

The two halves of a chain link icon pull apart and snap back together, over and over, like a tug test. Each half is its own path moving along the diagonal with a spring on the return.

icon · social · minimal

Gift Box Open Hover Effect

A ribboned gift box drawn as a real 3D box. On hover the lid springs up and tips back while a sparkle rises out of the opening. Box and lid are separate preserve-3d groups of faces.

icon · 3d · playful

Coin Flip Icon Hover

An icon button shaped like a coin that hops, spins two and a half turns and lands on its back, trading a star for a check. Stacked discs give the rim real thickness when it turns edge on.

icon · button · 3d · playful

3D Dice Roll Hover Effect

A six-sided die built from six faces with dotted pips. On hover it tumbles on two axes and comes to rest showing a six. Both rotations are one transition, so leaving rolls it back the other way.

icon · 3d · playful

macOS Dock Hover Effect

App icons in a glass dock that magnify under the pointer while their neighbors grow less and step aside. Pure CSS: sibling selectors for the right side, :has() for the left.

menu · icon · glass · playful

Radial Menu Hover Effect

A round button that swirls six actions out into a ring around itself on hover. Each item is rotated, pushed out and rotated back, so the icons stay upright while they spiral into place.

menu · button · icon · playful

Emoji Reaction Bar Hover

Hover the Like button and a bar of six reactions pops up above it, each emoji springing in a few milliseconds after the last. Hovering an emoji lifts and enlarges it.

button · reveal · playful · social

Star Rating Hover Effect

Hovering a star lights it and every star before it, previews a word for that score and pops the star with a spring. The trick is one :has() rule to light all stars, then ~ to unlight the rest.

icon · playful · fill

Classic Tooltip Hover Effect

The tooltip every icon button needs: a dark bubble with an arrow that fades in and rises into place. The text comes from a data-tip attribute, and both pieces are pseudo-elements.

icon · reveal · minimal · tailwind

Expanding Search Bar Hover

A round search button that opens into a full search field on hover and stays open while you type. The field is always full width and clip-path reveals it, so nothing reflows.

icon · reveal · minimal

Playlist Row Hover Effect

A track list in the Spotify style: hovering a row tints it, rolls the track number up into a play button and fades in a like button. The number and the icon share one grid cell.

menu · icon · reveal · tailwind

Typewriter Tooltip Hover Effect

A terminal button whose tooltip types its command out one character at a time behind a blinking block cursor. A steps() animation on a ch-based width does the typing.

icon · text · reveal · playful

Side Tooltip Hover Effect

A vertical toolbar whose labels unroll to the right of each icon on hover. The label is wiped in with clip-path from the icon's edge, so it reads as coming out of the button.

menu · icon · reveal

Map Pin Hover Effect

A pin on a small drawn map that hops up on hover while its shadow shrinks, then pops a place card above itself. The map is layered gradients, so the whole thing is a few divs.

icon · playful · shadow

File Row Hover Actions

A file list where hovering a row swaps its size for a set of action buttons that slide in one after another. The actions overlay the size column, so the row never changes width.

menu · icon · reveal · tailwind

Push Hover Effect

A quick press on hover: the button dips to 85% and springs back as if tapped, then keeps a light tint while hovered. The keyframe has only a 50% stop, so it returns to rest on its own.

button · icon · minimal

Bob Hover Effect

A chat button that floats up on hover, then keeps bobbing gently while the pointer stays. Two animations are chained on one element: a quick rise, then an endless alternating bob that starts after it.

button · icon · playful

Buzz Out Hover Effect

A call button that buzzes like a phone on vibrate: fast little shifts and twists that fade out over three quarters of a second. For a buzz that never stops, set the iteration count to infinite.

button · icon · playful

Back Pulse Hover Effect

The tinted button fills with the accent on hover, then its background keeps throbbing gently while the pointer stays, like a record light. The pulse waits half a second, so the fill lands first.

button · fill · icon

Forward and Backward Hover Effect

Previous and Next buttons that nudge the way they point on hover, with the chevron moving a little further than the button. Hover.css Forward and Backward, paired the way you would use them.

button · link · icon

Icon Float Away Hover Effect

The heart fills on hover while copies of it float up and away, drifting left and right as they fade, like likes on a live stream. Two ghost SVGs share one keyframe and one --drift property.

button · icon · playful · social

How to use these icon hover effects

Open any effect, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required: no JavaScript, no libraries. Classes are prefixed per effect so several can share a page.

To change the color, set --hfx-color on the element or any ancestor. To change the size, set --hfx-size: every dimension inside is in em, so padding, radii and offsets scale together.

Every snippet ships with a prefers-reduced-motion rule that disables the movement for people who asked their OS for less of it. The hover state still applies, only the transition is skipped.