Do the effects need JavaScript?
No. In the HTML + CSS, CSS Modules and styled-components exports every effect, including the loading spinner, is CSS. The React and Vue exports take an isLoading prop that your own state controls.
CSS Button Generator with Hover Animations
Design a CSS button with 8 presets and 9 motion effects, then copy it as plain HTML + CSS, CSS Modules, styled-components or Tailwind code.
If this tool isn’t working as expected, please take a screenshot of the error and report the problem here so we can investigate and improve it.
About this tool
A CSS button generator built around a visual editor: 8 presets, five variants (solid, outline, ghost, gradient, glass), shadow controls, an optional icon and nine motion effects - eight hover or press animations and a continuous pulse. The first export is a self-contained HTML button with a <style> block and no framework.
CSS Modules, styled-components and Tailwind (React, Vue and HTML) exports are in the same dropdown, so the same design can be copied in whichever form your project uses.
Hover effects only run where there is a hover state, and touch screens apply :hover inconsistently, so check the exported code on a phone if touch matters. The HTML + CSS, CSS Modules and styled-components exports also include a prefers-reduced-motion rule that switches off the movement and the pulse for people whose system asks for reduced motion.
How to Use Animated Button Generator
Set the Text and Style
Type the button label, then start from one of the 8 presets or set the variant, radius, icon and colors yourself.
Tune the Shadow
Adjust the shadow offsets, blur, opacity and color in the Shadows tab.
Pick a Motion Effect
Choose a hover or press effect such as scale, lift, glow or shine, or the continuous pulse.
Check the Preview
Hover and press the live button, and switch the background between light and dark.
Copy the Code
Choose HTML + CSS, Tailwind, styled-components or CSS Modules and copy it.
Common Workflows
A call-to-action for a static page
Keep the HTML + CSS export, adjust the colors and motion, and paste the whole block - the button and its <style> - into the page. No build step or CSS framework is involved.
Matching an existing design system
Start from the preset closest to your brand, then change the colors and radius, and set the shadow offsets, blur and opacity in the Shadows tab.
A component for a React or Vue project
Pick the React, Vue, styled-components or CSS Modules export in the dropdown. The design you set up carries over to whichever you choose.
Previewing before it goes into your project
Paste the HTML + CSS export into the HTML Playground to see the hover and press behavior on a blank page.
Examples
Lift animation in the HTML + CSS export
Default settings
Solid · pill radius · #635bff · Lift UpCSS (excerpt)
.btn {
border-radius: 9999px;
background-color: #635bff;
box-shadow: 0px 4px 10px #635bff66;
transition: all 200ms ease-out;
}
.btn:hover:not(:disabled) {
filter: brightness(1.1);
transform: translateY(-4px);
}The full export also has the padding, font and focus-visible rules, plus a disabled style. The shadow is written as an 8-digit hex color: the shadow color with the opacity slider's 40% as the last two digits (66).
Pulse plays all the time
Motion tab
PulseCSS
.btn:not(:disabled) {
animation: btn-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes btn-pulse {
50% {
opacity: 0.5;
}
}Unlike the other eight effects, Pulse isn't tied to :hover or :active - it plays whenever the button is enabled.
Common Mistakes
Problem
Using a Tailwind export in a project without Tailwind
Solution
The React + Tailwind, Vue + Tailwind and HTML + Tailwind exports are class lists, including arbitrary-value classes such as bg-[#635bff]. Without Tailwind configured they render as an unstyled button. The HTML + CSS export has no such dependency.
Problem
Expecting Loading State to make the HTML export interactive
Solution
Loading State bakes a disabled button with a spinner into the HTML + CSS snippet; static HTML has no state to switch. In the React exports, the same look is driven by an isLoading prop.
Limitations
One size and one font weight
The exports use 12px 24px padding, 16px text and semi-bold weight, and there's no control for any of them. Edit padding, font-size or font-weight in the copied code.
No timing or easing controls
Each effect has fixed durations and easing curves; choosing a different effect is the only way to change how it feels.
Glass needs something behind it
The glass variant is a translucent white background with a backdrop blur, so on a plain white page it looks nearly empty. Use the dark preview toggle, or place it over a colored or image background.
FAQs
These cover which export to choose, whether JavaScript is needed, and how the effects behave on touch screens.
Which export should I pick?
HTML + CSS works on any page and needs nothing installed. The three Tailwind exports assume Tailwind is already set up in your project. React + styled-components needs the styled-components package, and React + CSS Modules needs a bundler that handles .module.css files, as Next.js and Vite do.
Will the hover effects work on a touch screen?
Hover effects depend on the :hover state, which touch screens handle inconsistently: some browsers apply it after a tap and keep it until you tap elsewhere, others never apply it. The press effect uses :active, which does respond to taps. If touch matters, try the exported code on a phone.
Are the buttons accessible?
Every export has a visible keyboard-focus style: a focus-visible outline in the CSS-based exports and a focus ring in the Tailwind ones. The CSS-based exports also set aria-busy while loading; the Tailwind exports only wire the disabled attribute, so add aria-busy yourself if assistive technology should announce loading. The tool doesn't measure color contrast, so check your text and background colors yourself.
Get more tools like this
Leave your email so we can prioritize similar tools and updates.