20 CSS Animated Buttons

Hover effects are limited to what happens while the cursor is OVER the button — a fill slides in, a border draws, a glow ramps up. Animated buttons are broader: they cover hover, but also active/press states (3D press, ripple from click point), result states (submit success checkmark, add-to-cart progress fill), idle attention (jelly bounce, shine sweep), and stateful toggles (hamburger ↔ close, toggle switch flip). This collection covers all of them. If you only want hover-state effects, see our separate /motion/css-button-hover-effects/ collection. Use this one when the button needs to animate during a real interaction, not just on hover.

Half of them — 10 of 20. The Pure CSS demos cover: neon glow, background slide, pure-CSS ripple (uses ::after expanding from center), animated border draw, 3D press, liquid fill, moving gradient CTA, shine sweep, jelly bounce, and text flip. Each is tagged 'Pure CSS' on its card. The other 10 use a small vanilla-JS snippet for genuinely interactive state — submit-button success animation that fires on form submit, add-to-cart progress that runs once on click, hamburger-to-close toggle, toggle switch, loading spinner that you start/stop programmatically, etc. The JS lives in the demo's JS tab — every byte you need is in the code panel.

Use an ::after pseudo-element absolutely-centered inside the button, scaled from 0 to 4× on :active with opacity fading from 0.4 to 0 in the same keyframe. Wrap the button in overflow: hidden so the ripple clips at the edge. The ripple emerges from the button's center — true click-point ripples (where the wave starts from the exact pixel the mouse hit) need ~10 lines of JS to set --x / --y CSS variables on click. The Pure CSS Ripple Effect Button (#03) in this collection ships the no-JS version; the production CTA Hero Button (#11) shows the JS-coordinated version with click-coordinate tracking.

Three-stage animation: (1) the button enters a loading state when the form submits — text fades out, a CSS spinner fades in; (2) on resolved success, the spinner morphs into a checkmark using stroke-dasharray draw-in on an SVG path; (3) the button background animates to a success green and stays there briefly before resetting. The visible state machine is driven by a single data-state attribute on the button (data-state='idle' | 'loading' | 'success') and CSS rules keyed off that attribute — the JS just swaps the attribute value at the right moments. The Submit Button Success State demo (#12) in this collection ships the full recipe.

The pattern most e-commerce sites use: the button's width expands slightly on click, a progress bar runs across its background via animated linear-gradient or a scaling ::before, and on completion a checkmark + 'Added' label fade in to replace the original 'Add to cart' label. For a richer version, a small product icon arcs into the cart icon at the top of the page using CSS keyframes — but that's overkill for most uses. The Add To Cart Button Animation demo (#15) in this collection ships the standard recipe (progress bar + label swap).

Animate only transform and opacity. Both are compositor-only properties that bypass the layout and paint phases, so the browser hits 60fps even on lower-end devices. Avoid animating width, height, top, left, padding, or box-shadow size on the active transition (they trigger layout reflow and cost dozens of milliseconds per frame). For longer animations like a glow pulse or jelly bounce, add will-change: transform to the button (NOT its parent) and remove it when the interaction ends to free the compositor layer. Every demo in this collection follows these rules — that's what makes them feel snappy rather than laggy.

Yes. Every demo wraps continuous animations in @media (prefers-reduced-motion: reduce) so users who opt out (vestibular sensitivity, migraine triggers — about 35% of adults have some motion preference) get an instant state change instead of motion. On touch devices :hover falls back to :active so press / feedback effects still fire on tap. Every button is a real <button> element with a visible :focus-visible outline so keyboard users see the same affordance as mouse users — and the focus ring stays visible even when the hover effect plays. WCAG 2.2 non-text contrast (3:1) is met on every visible state.

Yes. Every demo is MIT licensed — free for personal and commercial use, no attribution required, no signup, no upgrade tier. Copy the HTML + CSS (+ JS, for the production demos) from the code panel and paste into your project. There's no watermark in the output. Use these on a client project, a SaaS marketing site, an enterprise dashboard — none of those need permission.