AI CSS Animations

CSS Animated Icon Buttons

41 animated icon buttons in CSS: play and pause, like and clap, follow, bookmark, record, unmute and scroll-down buttons with satisfying press states.

Expanding Circle Arrow Button

The 'Learn more' pattern: a colored circle holding an arrow stretches into a full pill behind the label, the text turns white and the arrow steps forward. One element changes width.

icon · minimal

Icon Reveal Button

A cart icon drives in from the left edge on hover while the label steps aside to make room. The icon waits outside the clipped button until the cursor arrives, then lands with a small overshoot.

icon · minimal

Sliding Knob Button

A pill track with a round knob that rolls to the far end on hover while the label slides the other way and the track fills in. The arrow turns one full circle, so the knob reads as rolling.

icon · playful

Rotating Circle Text Button

A round call to action with its label set around the rim. On hover the ring of text starts turning, the center disc grows and the arrow swings to point forward. The text follows an SVG textPath.

icon · playful · idle

Heart Like Button

The Twitter style like: the heart shrinks, a colored ring bursts outward, then the heart pops back filled with a spray of dots. A hidden checkbox holds the liked state, so a second click unlikes.

click-effect · icon · playful

Download Button with Progress

Click to download: the button darkens into a track, fills left to right while the percentage counts up and the arrow bobs, then shows a check. The number is a registered @property integer.

loading · success · icon

Add to Cart Button

Click and a cart rolls in, a box drops into it, and the cart drives off before 'Added' appears. Every step is one keyframe with forwards fill on a hidden checkbox. Click again to reset.

click-effect · success · icon · playful

Copy to Clipboard Button

A command box whose copy button flips to a check and 'Copied' on click, holds for a moment, then resets by itself. The pressed state snaps in and the rest state returns on a delayed transition.

click-effect · success · icon · tailwind

Trash Can Delete Button

Click delete and the bin's lid swings open, a sheet of paper drops in, the lid slams shut and the can squashes before the label reads 'Deleted'. The SVG parts move with fill-box transforms.

click-effect · icon · playful

Clap Button

Every press tips the hand, and every release sends a '+1' floating up with a burst of lines. The pressed state snaps the pieces into place and the rest state plays them out on a transition.

click-effect · icon · playful

Subscribe Button with Bell

The video site subscribe pattern: a solid 'Subscribe' pill turns into a muted 'Subscribed' one while a bell swings in, rings with a decaying swing and pops a badge. A hidden checkbox holds the state.

social · icon · click-effect

Bookmark Button

A 'Save' button with a ribbon tucked into its top edge. Click and the ribbon drops down past the bottom like a real bookmark, swings once and settles. The notch is a clip-path polygon.

click-effect · icon · minimal

Favorite Star Button

A round star button that spins three fifths of a turn as it fills gold, overshoots, and flicks five sparks out between its points. Because a star repeats every 72 degrees, it lands looking upright.

icon · playful · click-effect

Play Pause Button

A round media button whose play triangle splits into the two bars of pause, and back. Each half is a clip-path polygon with the same four points, so the shapes tween. Sound rings pulse while playing.

icon · click-effect · minimal

Upvote Button with Counter

A product-hunt style vote box: click and it fills, the arrow shoots out the top and returns from below, and the last digit rolls from 8 to 9. The digit is a two-row reel inside an overflow window.

social · icon · click-effect

Floating Action Button Menu

A round plus button that turns into a close X and fans three mini action buttons out in an arc, one after another. Each action rides a rotate, translate, rotate back chain, so its icon stays upright.

click-effect · icon · playful

Mute Unmute Button

A round speaker button: click and the sound waves collapse back into the speaker one after the other while a slash draws across it. The slash is stroked twice, once in the button color to cut a gap.

icon · click-effect · minimal

Paper Plane Send Button

Click send and the paper plane crouches, then shoots out through the right edge with the label chasing it, and 'Sent' lands with a check. One-shot keyframes on a hidden checkbox.

icon · success · playful

Record Button

A recorder button: click and the round dot morphs into a stop square, a halo pulses and a timer starts counting. The timer is a registered @property integer shown with counter(), zero padded.

icon · click-effect · glow

Lock and Unlock Button

A padlock button that unlocks on click: the key hole turns, the shackle pops up and swings open, and the button goes from 'Locked' to a green 'Unlocked'. Click again to lock it back.

icon · click-effect · success

Expanding Email Signup Button

A 'Subscribe' pill that widens into an email field with a send arrow when clicked, and stays open while it has text. The label points at the input, and :focus-within drives the whole morph.

click-effect · icon · minimal

Power Button

A dark device button that boots up on click: a glowing ring draws itself around the rim, the power icon lights in your accent and the glow keeps breathing while it is on. Click again to switch off.

icon · glow · click-effect

Shake Attention Button

An add to cart button that gives a short, decaying shake every few seconds, then rests, so it nudges without nagging. The cart icon swings a beat behind the button for a bit of follow through.

idle · playful · icon

Arrow Button

A pill with a round arrow chip at its end. Every few seconds the arrow pulls back, shoots out of the chip and a fresh one slides in behind it. Two arrows on one track, clipped by the chip.

icon · idle · minimal

Animated Chevron Button

A ghost button whose three chevrons light up one after another like runway lights, pointing the way forward. Each chevron runs the same opacity and nudge keyframe, staggered by a custom property.

outline · icon · idle

App Download Buttons

A pair of dark store style badges with a device glyph and two-line label. A small arrow drops into each screen on a loop, one after the other. Generic glyphs, so there are no logos to license.

icon · idle · minimal

Social Login Buttons

A stack of Continue with buttons for email, phone and passkey, the first one primary. A glint runs down the stack every few seconds to draw the eye. Plain glyphs, no brand logos to swap out.

social · icon · idle

Floating Chat Button

The round chat button from the corner of a support page: a ring pings out behind it and a greeting bubble pops in, waits, then tucks away again. One button, so the whole thing is one click target.

social · icon · idle

File Upload Button

A styled file input: a dashed label, an upload icon whose arrow keeps rising out of the tray, and a hint line. The real input sits inside the label, visually hidden, so it still opens the picker.

icon · outline · idle

Audio Play Button

A Listen pill for podcasts and voice notes: a round play icon, the label and five equalizer bars that bounce out of step. Each bar scales from its baseline on its own timing, so it never looks looped.

icon · idle · playful

Donate Button

A Sponsor button whose heart beats on its own: a quick lub-dub, then a rest, like a real pulse. The beat is one scale keyframe with two peaks, and the heart color mixes the accent with pink.

icon · idle · playful

Scroll Down Button

The hero section hint: a mouse outline whose wheel rolls down and fades, above a small Scroll label and two chevrons that blink in turn. Use it as a real button that jumps to the next section.

icon · idle · minimal

Go Live Button

A streaming button with a blinking red dot and two signal arcs on each side that light up in turn, like a broadcast icon on air. The arcs are two bordered circles with only their sides colored.

icon · idle · glow · tailwind

Countdown Timer Button

A limited offer button with a live timer chip that counts down from 04:59 second by second, and a stopwatch hand that ticks along. The digits are two registered @property integers shown as counters.

idle · icon

Bookmark Icon Button

A square icon button: press it and the outlined bookmark slips down out of view while a filled one drops in from the top, squashes on landing and settles. Two SVG icons in a clipped window.

icon · click-effect · minimal

Chevron Expand Button

A Show more pill whose chevron flips round with a spring when pressed while the label rolls to Show less. On hover the chevron chip fills in. A checkbox drives it, ready to open a details panel.

icon · click-effect · minimal

Hold to Confirm Ring Button

A dark pill with a progress ring: hold it and the ring closes around the dot, then the pill turns to your color with a drawn check. Let go early and it drains back. :active drives every transition.

click-effect · success · icon

Play Pause Pill Button

A pill audio button whose play triangle morphs into pause while flat equalizer bars spring to life. The icon is one clip-path polygon with eight points that fold from a triangle into two bars.

icon · click-effect · playful

Video Record Shutter Button

A camera app shutter: tap and the round dot shrinks into a stop square while a ring fills over a 15 second clip and the timer ticks. The timer is a registered @property integer printed with counter().

icon · click-effect · loading

Microphone Unmute Button

The mic button from a video call: muted it is red with a slash, unmuted the slash retracts and the mic capsule fills with a live voice level. The level is a bar scaling on an uneven loop.

icon · click-effect · minimal

Clap Counter Button

An outlined pill with a hand and a count: clap and the hand jolts, a ring of sparks flies out and the number rolls up one, while clapping again rolls it back. A hidden checkbox switches it all.

click-effect · icon · playful

How to use these icon buttons

Open any button, copy the HTML into your markup and the CSS into your stylesheet. Every button is a real <button>, so it is focusable, works with the keyboard and submits forms. No JavaScript is involved, even for the click and state animations.

To change the color, set --btn-color on the button or any ancestor. To change the size, set --btn-size: padding, radius, borders and shadows are all in em, so the whole button scales from that one value.

Press and click effects use :active and :focus-visible, so they play for mouse, touch and keyboard. Every snippet ships with a prefers-reduced-motion rule that turns the motion off for people who asked their OS for less of it.