Design professional CSS buttons visually — no coding required. Adjust every style property in real time, pick from built-in presets, and copy the finished CSS and HTML with one click.

Presets
Colors
Size & Typography
Border
Box Shadow
Hover Effects
Live Preview

How to Use the CSS Button Generator

  1. Choose a preset — start with Primary, Outline, Gradient, or any of the 8 presets.
  2. Adjust controls — tweak colors, size, border, shadow, and hover effects live.
  3. Toggle preview theme — check how the button looks on light and dark backgrounds.
  4. Copy CSS or HTML — switch tabs and click Copy to grab the finished code.
  5. Paste into your project — rename .my-button to match your class name.

CSS Properties Explained

PropertyWhat it does
background-colorFill color of the button
colorText color
font-sizeText size in pixels
paddingInner spacing (vertical / horizontal)
border-radiusCorner roundness; 9999px = pill shape
borderWidth, style, and color of the border
box-shadowDrop or glow shadow with full offset control
transitionAnimation speed for hover effects
transform: scale()Scale-up effect on hover

Preset Reference

  • Primary — solid indigo fill, subtle shadow, standard border-radius
  • Secondary — muted gray, minimal shadow
  • Outline — transparent background, colored border and text
  • Ghost — no border, no background; background appears on hover only
  • Gradient — linear-gradient background with glow shadow and scale hover
  • 3D — solid bottom shadow creates a raised, pressable look
  • Pill — border-radius: 9999px for fully rounded ends
  • Icon Button — compact square with equal padding, suitable for icon-only actions

Tips for Accessible Buttons

  • Maintain at least 4.5:1 contrast ratio between text and background.
  • Never rely on color alone — add a visible focus ring with :focus-visible.
  • Keep tap targets at least 44×44 px for mobile users.
  • Use <button> for actions and <a> for navigation links.