CSS Buttons Collection

Dev tools

css component library

SHOW HN2021

A collection of 80+ beautiful CSS buttons (click to copy)

Shown by guivr on Jul 21, 2021. Click the card to turn it over.

16points

6comments

#1,571of 2,533 in 2021

Top 63%of 2021 by points

How HN took it

MixedNo clear lean

3 positive, 1 neutral or asking, 1 mixed, 0 critical, out of 5 comments about the project. Thread score +0.38.

Idea: 2 for, 0 againstDesign: 1 for, 0 against

Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.

positive neutral or mixed critical about another commenter or something else the maker

Cool, inspiring collection
From 3 comments
- An inspiring collection! Would like to see something similar with other common elements. Suggestion: I think the copying should only fire up when clicking the button itself, not…
  n4bz0r on HN
- It's cool. I've used similar things in the past. I'm make sure to remember this on next time I need
  atum47 on HN
- This is cool. Buttons are surprising hard to get right.
  ryantgtg on HN
Liked a specific button design
From 1 comment
- I'm not a designer but I liked button Nr49
  McClearson on HN

Button code is largely copied from Amazon, Apple and Google CSS
From 1 comment
- It's ~90% copied from their CSS, I had to make a few adjustments sometimes. I used my own tool (CSS Scan - https://getcssscan.com) to copy the CSS. The only buttons made from…
  guivr on HN

Copy should only trigger when the button itself is clicked, not its container
From 1 comment
- An inspiring collection! Would like to see something similar with other common elements. Suggestion: I think the copying should only fire up when clicking the button itself, not…
  n4bz0r on HN
Collections of other common UI elements
From 1 comment
- An inspiring collection! Would like to see something similar with other common elements. Suggestion: I think the copying should only fire up when clicking the button itself, not…
  n4bz0r on HN

What does 'by Amazon', 'by Apple', 'by Google' mean on the buttons
From 1 comment
- What does it mean "by Amazon", "by Apple", "by Google"? Is your code copied from their css or it's just a new implementation inspired by their buttons?
  gus_massa on HN
Is the code copied or a new implementation
From 1 comment
- What does it mean "by Amazon", "by Apple", "by Google"? Is your code copied from their css or it's just a new implementation inspired by their buttons?
  gus_massa on HN