CSS Button Generator

Design and generate CSS buttons with custom colors, gradients, animations, shadows, and more. Copy code instantly.

css button generator css button maker button style generator custom css button animated button css css hover animation gradient button css box shadow button
Free Client-Side Private
Colors
Background type
Typography
Size & Shape
Border
Shadow
Hover animation
Transition speed
Preview
BG:
CSS
🔒 This tool runs entirely in your browser — your files are never uploaded to any server.

CSS Button Generator lets you design a custom button entirely in your browser and copy the production-ready CSS with one click. Adjust colors, gradients, typography, padding, border radius, shadow, and pick from 16 hover animations — the preview updates in real time as you make changes.

How to Use

  1. Enter the Button text you want displayed on the button
  2. Choose a Background color and select Solid or Gradient mode — if gradient, pick an end color and direction
  3. Set the Text color and adjust Font size, Font weight, and Letter spacing
  4. Use the Padding and Border radius sliders to shape the button
  5. Toggle Show border to add a colored border and set its width
  6. Choose a Shadow style — None, Soft, Hard, or Glow — and pick the shadow color
  7. Select a Hover animation from 16 options including Lift, Pulse, Shake, Bounce, Jelly, Rubber, Flash, and more
  8. Set the Transition speed — Fast, Normal, or Slow
  9. Use the Preview background swatches to check how the button looks on card, light, dark, or transparent backgrounds
  10. Click Copy CSS to copy the stylesheet, or Copy HTML to get a self-contained <style> + <button> snippet

Options

  • Solid / Gradient background — gradient supports Left→Right, Top-left→Bottom-right, Top→Bottom, and 135° directions
  • Soft shadow — diffuse drop shadow with adjustable color
  • Hard shadow — solid offset shadow (retro/flat UI style)
  • Glow shadow — neon-style outer glow ring ideal for dark backgrounds
  • Font weight — Regular (400), Medium (500), Semi-bold (600), Bold (700), Extra-bold (800)
  • Border radius — 0 (square) to 100px (pill); combined with Circle shadow creates full round buttons

Hover animations

  • Lift — button floats up 4px
  • Scale up / Scale down — button grows or shrinks
  • Pulse — continuous rhythmic scaling
  • Shake — quick horizontal jitter
  • Bounce — vertical spring bounce
  • Wobble — rotational side-to-side wobble
  • Jelly — elastic squash-and-stretch
  • Swing — pendulum rotation
  • Rubber — rubber-band stretch effect
  • Flash — rapid opacity flicker
  • Slide right — nudges the button rightward and back
  • Grow X — continuous horizontal scale breathing
  • Rotate CW — slight clockwise tilt
  • Heartbeat — double-pulse like a heartbeat

FAQ

How do I use the generated CSS in my project?

Copy the CSS and paste it into your stylesheet. Use Copy HTML to get a complete ready-to-paste snippet with both the <style> block and a <button> element. The class name in the output is .my-button.

Does the animation run constantly or only on hover?

Animations are triggered on :hover. Looping animations (Pulse, Grow X, Heartbeat) continue as long as the cursor is over the button. Others (Shake, Bounce, etc.) play once per hover.

Will the CSS work in all browsers?

Yes. The generated CSS uses standard properties with no vendor prefixes for transform, transition, and animation, which have universal support in all modern browsers (Chrome, Firefox, Safari, Edge).

Can I use this for an <a> tag instead of a <button>?

Absolutely. The CSS targets a class name (.my-button) so it works on any HTML element — <a>, <input type="submit">, <div>, etc. Just add the class.

Report an issue