I've been collecting CSS button sources for a while — partly because I keep needing them, partly because I got tired of pasting a snippet and then spending twenty minutes fixing it.
So I sat down and actually tested six of them. Not "looked at the homepage" tested — pulled buttons out, dropped them into a real project, checked them on a mid-range Android and with a keyboard.
Here's what I found, starting with why the pasting-and-fixing cycle happens at all.
The three things that make a pasted button need rewriting
1. It animates the wrong properties.
This is the big one, and it's invisible on your dev machine. A hover effect that animates width, height, top, margin, or box-shadow forces the browser to recalculate layout or repaint on every frame. On an M-series laptop it looks fine. On a mid-range Android it stutters.
/* Costs layout on every frame */
.btn:hover {
margin-top: -4px;
box-shadow: 0 8px 16px rgba(0,0,0,.3);
}
/* Compositor-only — runs on the GPU, no layout, no repaint */
.btn::after {
box-shadow: 0 8px 16px rgba(0,0,0,.3);
opacity: 0;
transition: opacity .2s;
}
.btn:hover { transform: translateY(-4px); }
.btn:hover::after { opacity: 1; }
The rule of thumb: transform, opacity, and filter are cheap. Almost everything else isn't. If you want the shadow to animate, put it on a pseudo-element and fade that in.
Want to check a snippet before committing to it? DevTools → Rendering → Paint flashing. Hover the button. Green flashes mean repaints.
2. It styles :hover and forgets :focus-visible.
A surprising number of copy-paste buttons have a beautiful hover state and nothing at all for keyboard users — or worse, outline: none with no replacement. That's a real accessibility failure, not a nitpick.
.btn:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
:focus-visible rather than :focus means mouse users don't get a ring on click, but keyboard users do. Two lines. Add them to anything you paste.
3. It ignores prefers-reduced-motion.
If your button bounces, scales, or ripples, some people need it not to. Wrap the motion, keep the state change:
@media (prefers-reduced-motion: reduce) {
.btn, .btn::after { transition-duration: .01ms; animation: none; }
}
Now, the sources.
1. Uiverse.io
Best for: browsing by vibe when you don't know what you want yet.
Community-driven, so the variety is enormous — hundreds of button styles from subtle to genuinely unhinged. Live preview before you copy, mostly pure CSS/HTML with some Tailwind versions.
The trade-off is exactly what you'd expect from community submissions: quality varies a lot by contributor. Plenty of these animate layout properties, and accessibility isn't enforced. I treat it as inspiration I'll clean up, not code I'll ship as-is.
🔗 uiverse.io/elements?tags=button
2. CSS Scan — Beautiful CSS Buttons
Best for: clean, conventional buttons you'd actually put in a real product.
A curated collection of 92 free CSS buttons, click-to-copy. Much more restrained than Uiverse — these read as "designed by someone with taste" rather than "look what I can do with clip-path." My default when I need something for a dashboard or a marketing page.
Heads up: the buttons page is free, but it's a funnel for the paid CSS Scan extension. Nothing wrong with that, just know what you're on.
🔗 getcssscan.com/css-buttons-examples
3. CodeFronts — CSS Buttons
Best for: button states, not just button looks.
51 buttons covering the things that usually get skipped: form/submit buttons, icon buttons with accessible tooltips, loading states, disabled states, plus some click-effect studies (magnetic ripple, glitch, neon burst).
This is the one that made me write the first half of this post. The animations are compositor-only (transform, opacity, filter), :focus-visible and reduced-motion are handled by default, and the demos hold up at 320/600/1440px. I pasted three of these in without changing anything, which I can't say about the rest of the list.
Where it loses: 51 is small. Uiverse has an order of magnitude more variety, and if you want something visually wild you'll find it there and not here. This is a "handled correctly" collection, not a "biggest" one.
🔗 codefronts.com/components/css-buttons
4. Hover.css
Best for: when you want a stylesheet, not snippets.
Ian Lunn's library — 100+ hover effects as utility classes you drop onto existing elements. Instead of copying a whole button, you add hvr-grow or hvr-sweep-to-right to the button you already have. Available in CSS, Sass, and LESS.
Check the license before using this commercially. It was MIT before v2.2.0 (March 2017), but current versions require a commercial license for commercial use. I've seen this shipped without anyone noticing.
5. CodersEra — CSS Button Hover Effects
Best for: understanding the technique instead of copying it.
Less a library, more a reference. Each effect comes with full code plus an explanation of what's actually happening — which properties are doing the work and why. Genuinely useful when you want to adapt an effect to your design system rather than paste it verbatim.
Not where you go if you're in a hurry.
🔗 codersera.com/blog/best-top-50-css-button-hover-effects
6. cssbuttons.app
Best for: a quick, no-friction grab.
60+ handpicked CSS buttons. Smaller than the others and the collection doesn't seem to update often, but the interface is fast and there's no signup. Worth a look when the bigger sites are giving you too many options.
Short version
- Don't know what you want → Uiverse
- Want tasteful defaults → CSS Scan
- Care about states and a11y → CodeFronts
- Want utility classes → Hover.css (check the license)
- Want to learn the technique → CodersEra
- Want it fast → cssbuttons.app
Whichever you pick, add the :focus-visible block and the reduced-motion query. Most snippets on the internet don't have them.
What's your paint-flashing horror story? I once shipped a nav where every link animated letter-spacing on hover. Looked incredible. Dropped the page to about 12fps on scroll.
Top comments (0)