AI CSS Animations

CSS Hover Effects

34 copy-paste hover effects for buttons, cards, links and images. Each one is a single HTML + CSS snippet with no JavaScript, recolored with one variable.

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

Card Lift

The whole card lifts and its shadow deepens, the standard hover for anything clickable in a grid. Two properties transition; nothing inside the card moves.

card · lift · tailwind

3D Tilt Card

The card tips back and to the side in 3D as if pushed at one corner. Pure CSS tilts in a fixed direction; it does not follow the cursor, and it does not need to.

card · 3d

Image Zoom Card

The cover image scales up inside its frame while the frame stays put, a cinematic push-in. The image container clips the overflow so nothing spills.

card · image · tailwind

Caption Reveal Card

A caption panel slides up over the image on hover, the classic portfolio and gallery treatment. The panel is inside the image frame so it never changes the card's height.

card · image · overlay

Spinning Gradient Border Card

A conic gradient border spins around the card while you hover. The angle is a registered custom property, which is what makes a gradient animatable at all.

card · border · gradient

Flip Card

The card turns over to show its back. Front and back are stacked faces with backface-visibility hidden inside a 3D-preserving wrapper, so both sides render crisply.

card · 3d

Card Shine

A diagonal sheen crosses the whole card on hover, the same trick as the shine button but scaled up. Works especially well on dark cards and pricing tiers.

card · shine

Content Rise Card

The title sits low on the image; on hover it rises and a description fades in beneath it. Everything is positioned inside the image, so the card's footprint never changes.

card · image · overlay

Glass Card

A frosted-glass card whose blur and border brighten on hover. The frost comes from backdrop-filter, so it looks best over a colorful or busy background.

card · glass · dark

Underline Grow Link

An underline draws in from the left on hover and retreats the same way. The line is a pseudo-element scaled on X, which is smoother and cheaper than animating width.

link · underline · tailwind

Underline from Center Link

The same drawn underline, but it grows outward from the middle. Only the transform origin changes, which makes it a good companion to the left-to-right version.

link · underline

Highlighter Link

A translucent highlighter stroke fills in behind the text from left to right, like someone running a marker across it. Done with an animated background size.

link · fill

Slide Up Text Link

The link text rolls up and out while an identical copy rolls in from below in the accent color. The copy comes from a data attribute, so the markup stays a single word.

link · text

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

Strike Through Link

A line draws through the middle of the text on hover while the text fades. Good for 'compare plans' style toggles and nav items that mean 'not this one'.

link · underline

Bracket Link

Square brackets slide in from either side to wrap the text, a nod to terminal and code aesthetics. The brackets are pseudo-element content, so they never touch the copy.

link · text · playful

Grayscale to Color Image

Images sit in black and white until hovered, then bloom into color and grow a touch. A filter transition does all the work, so it applies to any img or background.

image · filter

Zoom with Dark Overlay Image

The image pushes in while a dark tint settles over it and a label appears in the middle. The go-to hover for photo grids that lead to a detail page.

image · overlay

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

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

Frequently asked questions

How do I add a hover effect to a button in CSS?

Give the button a class, then write a :hover rule that changes the properties you want to animate and a transition on the base rule so the change is smooth. Every button effect above is exactly that pattern, ready to paste.

Do these hover effects work on mobile?

Phones have no hover, so the effect shows on tap and stays until the next tap. Design the effects as decoration, not as the only way to reveal content, and give links and buttons a visible resting state. The entry pages have a "hold hover state" switch so you can preview the effect on a touch screen.

Can I use these hover effects with Tailwind CSS?

Yes. Entries tagged "tailwind" include a version written with Tailwind utility classes such as hover:-translate-y-1 and group-hover:scale-110. The others can be added to any Tailwind project as plain CSS.

Why animate transform and opacity instead of width or top?

Transform and opacity are composited on the GPU, so they animate at 60fps without re-laying out the page. Width, height, top and margin force layout on every frame. The snippets here use transform wherever the effect allows it.

How do I change the color of a hover effect?

Set the --hfx-color custom property on the element or any ancestor. Every effect reads its accent from that one variable, including the mixed gradient and glow colors.