Buttons.cool
The coolest buttons in town — Collection of free HTML and CSS button code examples
FreeDesignUI LibraryCode18,536 impressions#52 of its week2 comments
Comments
>log in to commentHi Mark Redman, this is actually really valuable feedback, so thanks a lot for this! Indeed, the "button generator" could benefit some love, and I hear your issues. >I tried going back to copy the button code but just couldn't get the button code to match the style? Gotcha, indeed it's 100% randomized, and if you copy the code, go back to an other page, and back again to the generator, there's a few chances your button would still be there. Once again, thanks a lot for this, it's extremely valuable. As I'm a one-man-band, it's sometimes hard to know on which feature I should focus, so that definitely helps. Even tho you had some issues, I really hope you enjoyed the website and the buttons on here.
- Mark Redman· 3y ago
I needed to generate some buttons and tried this, its not very intuitive and could not get he buttons to work.. If you click on copy it copies some of the code, not the button code and returns to the buttons, which is annoying. I tried going back to copy the button code but just couldn't get the button code to match the style? ended up using the button tool from a couple of weeks ago, which is must easier. Feedback: Show all the code that matches up, and don't go back to the button list after copying, but the real issue is that there is not a clear example on how it all ties together and it didn't work for me
Buttons.cool offers a curated collection of free, open-source HTML/CSS button snippets you can copy-paste into any web project.
- for
- Front-end developers and designers looking for ready-made button code.
- pricing
- free
Key features
- Free to use — All button code can be copied and used without any cost.
- Open source — Buttons are sourced from CodePen and can be forked or modified.
- Easy copy-paste — Copy the code panel and paste directly into your site.
- Customizable — Change colors, size, text and other styles easily.
- Search & filter — Filter buttons by color, shape, tags or search by name.
- Curated collection — Hand-picked best buttons from the CodePen community.
- Regular updates — New buttons are added periodically and users can suggest additions.
Use cases
- Add a stylish button to a landing page without writing CSS from scratch.
- Prototype UI components quickly during design sprints.
- Learn modern CSS/JS button techniques by inspecting examples.
- Customize a button to match brand colors and copy it into a product site.
Buttons.cool vs alternatives
 Buttons.cool |  Flowbite |  Float UI v2 |  Saas UI | |
|---|---|---|---|---|
| Best for | Free ready-to-paste button snippets | Tailwind UI components | Tailwind UI collection | React starter kit |
| Pricing | Free | Free | Free | Free |
| DevHunt upvotes | 13 | 36 | 44 | 54 |
| Launched | Jan 2023 | Jan 2024 | Dec 2023 | Jan 2023 |
- Buttons.cool vs Flowbite: Tailwind-based component library with ready-made UI elements.
- Buttons.cool vs Float UI v2: Offers free Tailwind UI components for multiple frameworks, not just buttons.
- Buttons.cool vs Saas UI: A broader React component starter kit, includes layout and logic beyond buttons.
Buttons.cool FAQ
Is Buttons.cool free for commercial projects?+
Yes, all buttons are free to use and can be included in commercial sites.
Can I edit the button styles?+
Absolutely – you can modify the CSS or JS in the copied code to fit your design.
Where do the button codes come from?+
They are curated from open-source CodePen creations by community contributors.
How can I suggest a new button?+
You can contact the site owners to propose additions; new buttons are added regularly.
Do I need an account to use the buttons?+
No account is required; you can copy any button directly from the site.
Summarized by DevHunt from buttons.cool · Sep 27, 2026. Details may change; check the official site.