CSS Button Hover Effects

98 CSS button hover effects: fill and sweep animations, glows, border draws, lifts and icon reveals. Each is one button and a few lines of CSS.

Slide Fill Button

An outlined button whose fill slides in from the left on hover while the text flips to white. The fill is a pseudo-element, so the button's own background stays transparent.

button · fill

Fill Up Button

The fill rises from the bottom edge instead of sliding sideways. Same one pseudo-element, different axis, and it pairs well with the slide version on the same page.

button · fill

Skew Fill Button

A slanted panel wipes across the button on hover. The pseudo-element is skewed and oversized so its angled edge crosses the whole width cleanly.

button · fill

Shine Sweep Button

A band of light passes over a solid button, like a reflection sliding across glass. The band is a translucent gradient that only moves on hover.

button · shine · tailwind

Glow Button

The button lights up with a soft halo in its own color and rises a hair. The glow is a box-shadow that transitions from zero, so nothing jumps.

button · glow · tailwind

Lift Button

The most common button hover on the web: the button lifts a few pixels and gains a shadow, as if it floated off the page. Subtle, fast and safe for any brand.

button · lift · tailwind

Border Draw Button

Two pseudo-elements draw the border around the button on hover: one grows along the top and right, the other along the bottom and left, meeting at the corners.

button · border

Gradient Shift Button

A two-tone gradient slides across the button on hover by moving the background position. The second color is mixed from your accent, so it always matches.

button · gradient

Pulse Ring Button

On hover a ring radiates outward from the button's edge and fades, once per second, like a sonar ping. It stops the moment the cursor leaves.

button · glow

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

Text Swap Button

The label slides up and out while a second label, stored in a data attribute, slides in from below. Handy for 'Subscribe' becoming 'Let's go' without any JavaScript.

button · text

Outline to Solid Button

A ghost button that fills solid on hover. The plainest effect in the set, and the right default for secondary actions that should not shout.

button · fill · minimal · tailwind

Springy Squish Button

Grows slightly on hover and squishes down on press, with an overshooting easing curve so it feels springy rather than mechanical. Great for playful products and games.

button · playful

Neon Button

An outlined button that switches on like a neon sign: the text and border glow, and light bleeds inward. Meant for dark backgrounds.

button · glow · dark

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

Circle Fill Button

A circle grows from the center of an outlined button until it covers every corner. The circle is sized from the button's width, so short and long labels both fill completely.

button · fill · tailwind

Shutter In Button

Two panels slide in from the left and right edges and meet in the middle, like doors closing. Each panel is a pseudo-element a hair over half wide, so no seam shows where they meet.

button · fill · tailwind

Liquid Wave Fill Button

Liquid rises and settles just under the brim, where two wavy surfaces keep rolling past each other while you hover. The waves are tiled radial gradients, so there is no SVG.

button · fill · playful

Clip Path Wipe Button

A slanted wipe where the label changes color exactly under the edge, letter by letter. A filled copy of the button is revealed with clip-path, so the text never vanishes into the fill.

button · fill · reveal

Paint Drip Button

A lip of wet paint with a few drips hangs from the top edge; on hover the paint pours down and fills the button. Drips and sags are gradient layers on one pseudo-element that only moves.

button · fill · playful

Staircase Fill Button

Four bars rise one after another and lock together into a solid fill, then drop in reverse order when you leave. The stagger is a --i index per bar feeding transition-delay.

button · fill · tailwind

Cross Fill Button

Two diagonal strokes draw an X across the button, then thicken until they cover it. The individual rotate and scale properties let length and thickness run on separate timings.

button · fill · playful

Dot Expand Button

A small dot sits beside the label; on hover it swells until it floods the whole pill. The dot is a real element behind the text, scaled with transform, so it stays sharp and cheap.

button · fill · minimal · tailwind

Inset Shadow Fill Button

The pill's outline is an inset box-shadow, and on hover its spread grows inward from every edge until it fills. No pseudo-elements and no extra markup: one property does it.

button · fill · shadow · minimal

Curtain Drop Button

A pleated curtain drops from the top, bounces twice off the bottom edge and settles. The bounce is a linear() easing curve, and the folds are one repeating gradient.

button · fill · playful

Corner Fill Button

A 45 degree edge sweeps from the bottom-left corner to the top-right. The fill is an oversized square rotated into a diamond and scaled up from the corner, so the angle never changes.

button · fill

Double Layer Fill Button

A pale tint sweeps across first and the solid color chases it a beat later, then they leave in reverse order. Two pseudo-elements, one easing curve, different delays.

button · fill · tailwind

Striped Fill Button

Thin diagonal stripes appear and thicken until they merge into a solid fill. The stripe width is a registered @property length, which is what lets a repeating gradient transition.

button · fill · gradient

Arrow Sweep Button

The fill arrives with a pointed chevron leading edge, so the button itself seems to say 'this way'. The chevron is a clip-path polygon on a pseudo-element wider than the button.

button · fill

Clock Wipe Button

The fill sweeps around the center like a clock hand until it closes the circle. A conic gradient whose angle is a registered @property, so the browser can transition it.

button · fill · gradient

Rotating Square Fill Button

A square spins a three-eighths turn while it grows from the center, landing square-on to cover the button. One transform on one pseudo-element, with a fast-out easing so it lands softly.

button · fill · playful

Pixel Fill Button

The fill dithers in like an old game screen: a quarter of the pixels, then half, then three quarters, then all. Four checker layers whose colors are registered properties on stepped delays.

button · fill · playful

Price Reveal Fill Button

The fill slides in carrying a second label and pushes the first one out, so 'Buy now' becomes the price. The hover label is aria-hidden, so screen readers hear the real one.

button · fill · reveal

Ink Bleed Button

Two blots of ink spread from opposite corners with ragged, living edges and soak the whole button. An inline SVG turbulence filter roughens the edges of two growing circles.

button · fill · playful

Elastic Fill Button

An inner pill springs open inside the outline and wobbles like jelly before it settles. Width and height run on separate linear() spring curves, slightly out of phase.

button · fill · playful

Two Way Sweep Button

The top half fills from the left while the bottom half fills from the right, and they lock together in the middle. A small delay on the second half keeps it from feeling mirrored.

button · fill

Diagonal Split Fill Button

Two triangles slide in from opposite corners and meet along the diagonal. Each is a clip-path triangle drawn a touch oversize, so the join closes without a hairline gap.

button · fill

Halftone Fill Button

A faint halftone texture at rest; on hover the dots swell until they merge into a solid fill. The dot radius is a registered @property length inside a tiled radial gradient.

button · fill · gradient

Flip Down Fill Button

The fill swings down from a hinge along the top edge, overshoots a little and settles, like a flap falling shut. A perspective rotateX with a damped linear() easing curve.

button · fill · 3d

Corner Brackets Fill Button

Four corner brackets frame the label like a viewfinder; on hover they thicken and reach inward until they tile a solid fill. Eight gradient layers and one background-size transition.

button · fill · border · minimal

Scribble Fill Button

A marker zigzags across the button and colors it in like a margin doodle, then the ink settles solid. One inline SVG path drawn with stroke-dashoffset; pathLength=1 keeps the math simple.

button · fill · playful

Underline to Fill Button

A text button with a short underline that grows up and out into a full rounded fill on hover. One clip-path inset() that interpolates its edges and its corner radius together.

button · fill · underline · minimal

Bubble Fill Button

Five bubbles pop up at scattered spots with a springy overshoot and merge into a solid fill. Each bubble reads its position and stagger from inline custom properties.

button · fill · playful

Offset Fill Button

A tinted block sits offset behind the outline; on hover it snaps into the frame with a little overshoot and turns solid. The block is a pseudo-element that only moves and recolors.

button · fill · shadow · tailwind

Radial Glow Fill Button

A soft-edged radial fill blooms up from below the button and leaves a lighter glow at the bottom center. The radius is a registered @property, so the feathered edge travels smoothly.

button · fill · gradient

Product Card Add to Cart Hover

An online store product card: the item lifts and tilts while an Add to cart button slides up from the bottom of the photo. It also opens on keyboard focus through :focus-within.

card · button · reveal · tailwind

Job Listing Card Hover

A job board row: an accent bar slides down the left edge, the company mark tips, and the salary steps aside for an Apply button. It also works from the keyboard through :focus-within.

card · button · reveal · tailwind

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

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

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

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

3D Cube Flip Button

The button is the front of a cube. On hover the cube rolls forward and its top face, filled with a second label, turns to face you. Two faces on a preserve-3d box.

button · 3d · fill

Split Flap Button

A departure board flap: the top half of the label falls forward on its hinge and lands with a small bounce, showing the next word. Four half-height copies of the text and one rotating flap.

button · 3d · playful

Rotating Prism Button

A triangular prism with a label on each side. While hovered it rolls through all three faces with a pause on each, so one button carries a call to action and two reassurances.

button · 3d · text

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

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

Swipe to Reveal Actions Hover

An inbox row that slides left on hover to uncover snooze and archive buttons, like a swipe on a phone. The actions sit behind the row and pop in a beat after it moves.

card · reveal · button

Keyboard Shortcut Key Hover

A docs search button whose shortcut keys press down one after the other on hover, then stay lit, as if you had just typed the combo. The keycaps get their depth from a bottom shadow.

button · 3d · playful

Toggle Switch Hover Effect

A real checkbox switch whose knob stretches toward the far side on hover, as if about to flip, inside a soft halo. It still toggles on click, and the stretch works in both states.

button · playful · minimal

Color Swatch Picker Hover

A row of shades mixed from your accent: hovering one grows it with a spring, rings it in its own color and shows its shade number underneath. The selected shade carries a drawn check mark.

button · playful · border · tailwind

Range Slider Hover Tooltip

A volume slider that thickens its track, rings the thumb in a halo and pops a value bubble above it on hover. The fill and the thumb both read one --v percentage, so they always line up.

button · reveal · minimal

Tag Chip Hover Effect

Filter chips that fill with the accent on hover and grow a remove button, whose cross spins in as it appears. Only the hovered chip changes width, so the row reflows gently.

button · fill · reveal

Grow Hover Effect

The Hover.css classic: the button scales up by a tenth when the pointer arrives and eases back when it leaves. One transform on the element, so it works on any button, card or image.

button · minimal · tailwind

Shrink Hover Effect

The opposite of Grow: a raised white button sinks to 94% and its drop shadow tightens, like a card pressed into the page. Suits secondary actions that should feel lighter than the main one.

button · shadow · minimal

Pulse Hover Effect

While hovered, the button breathes in and out around its own size, a little bigger then a little smaller, once a second. It stops the moment the pointer leaves, so it never nags at rest.

button · playful

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

Pop Hover Effect

The button pops: it jumps past full size, dips under, then settles, all in half a second. The label pops a beat after the button, which gives the motion a little follow through.

button · playful · gradient

Grow Rotate Hover Effect

A coupon chip that grows and tips a few degrees on hover, on a spring curve that overshoots and settles. The dashed inner line is an outline with a negative offset, so it needs no extra markup.

button · playful · tailwind

Float Shadow Hover Effect

The button rises half an em while a soft oval shadow stays on the ground below it, so it reads as floating rather than sliding. The shadow is a radial gradient that moves down as the button goes up.

button · shadow

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

Wobble Horizontal Hover Effect

The button shakes side to side a few times, each swing smaller than the last, then comes to rest. A one-shot keyframe on hover: the same motion a login form uses to say no.

button · 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

Skew Hover Effect

The outlined button leans into a slant on hover. This one skews from the center; set transform-origin to the bottom edge for Hover.css Skew Forward, or flip the angle for Skew Backward.

button · border · tailwind

Bubble Float Bottom Hover Effect

The button floats up and a speech bubble tail slides out from underneath, turning it into a chat bubble. The tail is a CSS border triangle that starts tucked behind the button's bottom edge.

button · playful

Curl Top Right Hover Effect

The top right corner of the button peels over on hover like a page, showing its lighter back and a soft shadow. A clip-path cuts the corner while a gradient square plays the folded flap.

button · shadow · playful

Outline Out Hover Effect

A ring detaches from the button's edge and moves out to a small gap on hover. It is the outline property with a growing outline-offset, so it follows the border radius and doubles as a focus ring.

button · border · tailwind

Ripple In Hover Effect

Two rings close in from outside the button, one after the other, and fade as they land on its edge while the button takes a light tint. The reverse of a ripple: it pulls the eye in.

button · border

Trim Hover Effect

A thin white frame settles inside the button's edge on hover, like the trim on a ticket or a badge. It is a pseudo-element that fades in while shrinking from just outside to its inset position.

button · border · minimal

Round Corners Hover Effect

A square-cornered button softens into a pill on hover. Only border-radius transitions; it is set a touch past half the height so the ends end up fully round at any font size.

button · border · minimal · tailwind

Underline Reveal Hover Effect

A thick accent bar slides up into the bottom edge of a tinted button, the way a tab marks itself active. Move the bar to the top edge and flip the direction for Hover.css Overline Reveal.

button · underline

Shadow Radial Hover Effect

Soft oval shadows spread from the button's top and bottom edges on hover, like light spilling from a lamp. Two pseudo-elements carry radial gradients centered just outside the button.

button · shadow · glow

Box Shadow Outset Hover Effect

The button steps up and to the left while three hard shadows fan out behind it in fading tints, like a stack of cards. One box-shadow list transitions from three zero offsets to three growing ones.

button · shadow

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

Wobble Skew Hover Effect

A glossy candy button that wobbles like jelly on hover, skewing left and right with each swing smaller than the last. The keyframe stops match Hover.css Wobble Skew, on a button that suits the motion.

button · playful · gradient

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

Magnetic Button Hover Effect

The pill leans toward the pointer as it approaches, and the label drifts a little further for depth. Nine invisible cells around it set --x and --y through sibling selectors, so no JavaScript runs.

button · playful

How to use these button 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.