Animated Button Generator

Design glowing, neon and 3D buttons with a live hover preview, then copy the code

100% free. Runs entirely in your browser - your files and data never leave your device and nothing is uploaded to any server.

State

Export

Hover and click the live button. Magnetic, ripple and explosion also ship a tiny vanilla script.

/* Animated button - generated by 500 Toolbox */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,500,0,0");
.tb-btn {
  --bg: #7c3aed; --fg: #fff; --hov: #a855f7; --bd: 0px solid transparent;
  --r: 14px; --sh: none; --spd: 280ms; --int: 70;
  --w: 220px; --h: 52px; --pad: 18px; --fs: 16px; --ff: system-ui, sans-serif;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--w);
  height: var(--h)
…

Jump to the next useful tool without leaving your flow.

See more

About this tool

Buttons do more work than any other control on a page, and a dull one gets ignored. This generator gives you glow, neon, ripple, magnetic, 3D press, glitch and more, with live hover and click on the real button. Change type, colour, radius and speed, then copy HTML and CSS that you can paste into any project. JavaScript is included only for effects that need it, such as magnetic tracking or a ripple.

How to use this tool

  1. Choose an effectHover glow, neon, shine, ripple, 3D press, pulse, glitch and the rest.
  2. Customise the buttonEdit the label, colours, size, radius, shadow and animation speed. Preview hover, active, disabled, loading and success.
  3. Copy the codeCopy HTML and CSS. Magnetic, ripple and explosion also offer JavaScript. ZIP download is available.

Animated buttons that stay accessible

Keep text contrast high in every state, make sure the button still looks like a button with the animation turned off, and keep effects short - under about half a second.

Respect the reduced-motion setting: wrap large movements in a prefers-reduced-motion media query so people who get motion sickness see a calmer version.

Key features

  • Twenty-one animation templates, from quiet shine to neon and glitch.
  • You can hover and click the actual button in the preview.
  • Export is clean CSS. Extra JavaScript only when the effect needs it.
  • Random Design applies a usable combination in one click.

Common uses

  • A primary CTA with a soft glow on a marketing page.
  • A neon button for a dark product UI.
  • A ripple on a form submit so the click feels acknowledged.

Mistakes to avoid

  • Animating box-shadow or width on hover. Both force layout or paint work every frame - animate transform and opacity instead.
  • Removing the focus ring for looks. Keyboard users then cannot see which button they are on; restyle :focus-visible rather than deleting it.
  • Using a glow or neon effect on a light background, where the colour has nothing to bleed into and just looks muddy.
  • Putting a 600ms transition on a primary action. Anything past roughly 250ms makes a click feel unresponsive.
  • Forgetting the disabled and loading states, so a form can be submitted twice before the first request returns.

Frequently asked questions

No. Most are CSS only. Magnetic, ripple and click explosion add a short script. Copy JS is hidden unless the current effect needs it.

Yes. The label, optional icon, colours, size and radius all update the live preview and the exported snippet.

The generated CSS is small. Avoid stacking many explosion or glitch buttons on one view if you are targeting very low-end phones.

Keep the text readable with good contrast, make sure a visible focus style shows for keyboard users, and respect prefers-reduced-motion by toning down or removing animation for people who ask for less motion.

Subtle effects such as a soft glow, a slight lift or a ripple on click draw attention without distracting. Save glitch and strong neon effects for playful brands or landing pages.

Paste the CSS into your theme's custom CSS area and the HTML into a custom HTML block or embed. Add the JavaScript snippet in a footer code area if the effect needs it.