Before your next click
Button questions, answered.
How to use the code, work with Tailwind and share a contribution.
What is Animating Buttons?
Animating Buttons is an open source community collection of animated buttons for websites. Preview and customize HTML, CSS, Tailwind CSS and JavaScript examples, or explore React buttons with original TypeScript source.
How do I use a button in my project?
Open a button, test its live preview and choose Copy HTML or Download. Downloads contain index.html, style.css, app.js and creator credit. Add the markup, styles and interaction code to your project, then check keyboard focus, responsive behavior and motion.
Does the editor support Tailwind CSS?
Yes. Choose Tailwind CSS v4 in the editor and use complete utility class names in HTML or JavaScript. Downloads include compiled CSS, so they do not need a Tailwind browser CDN runtime. The CSS tab accepts plain CSS; it does not compile @apply, plugins, config or imports.
Can I use the buttons with React or Next.js?
Yes. Open a React button to copy individual TSX files or download the source with its dependencies. For HTML examples, adapt the markup to JSX and move JavaScript interactions into React handlers or effects.
Are the buttons free to use?
Browsing, previewing and downloading are free. The repository includes an MIT license. Check the license and author notices that apply to each contribution, and keep required notices when you reuse code.
What can I submit to the collection?
Submit one button or a small group of up to six controls, with a name, categories and the code needed to run it. Full pages, cards, forms, navigation and external script tags are not accepted. New submissions and creator edits enter moderation before publication.
Do I need an account, and where are my saved buttons stored?
You can browse, preview, edit locally, download and save browser-local collections without an account. GitHub sign-in is needed to like or submit buttons and manage a profile. Drafts and collections stay in this browser; export a collection backup before changing devices or clearing browser data.
Are every button's animations and controls accessible?
Each contribution needs testing. The editor checks accessible names, keyboard reachability, target size and solid-color text contrast. Test Tab, Enter, Space, focus appearance and reduced motion yourself. Automated checks are guidance rather than an accessibility certification.