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.

<div>
  <div class="bgen-section-title">Presets</div>
  <div class="bgen-presets">
    <button class="bgen-preset-btn" data-preset="primary">Primary</button>
    <button class="bgen-preset-btn" data-preset="secondary">Secondary</button>
    <button class="bgen-preset-btn" data-preset="outline">Outline</button>
    <button class="bgen-preset-btn" data-preset="ghost">Ghost</button>
    <button class="bgen-preset-btn" data-preset="gradient">Gradient</button>
    <button class="bgen-preset-btn" data-preset="threed">3D</button>
    <button class="bgen-preset-btn" data-preset="pill">Pill</button>
    <button class="bgen-preset-btn" data-preset="icon">Icon Button</button>
  </div>
</div>

<hr class="bgen-divider">

<!-- Button Text -->
<div class="bgen-field">
  <label>Button Text</label>
  <input type="text" id="bgen-text" class="bgen-select" value="Click Me" style="padding:5px 8px;">
</div>

<!-- Colors -->
<div class="bgen-section-title">Colors</div>

<div class="bgen-field">
  <label>Background Color</label>
  <div class="bgen-color-row">
    <input type="color" id="bgen-bg" value="#4f46e5">
    <input type="text" id="bgen-bg-hex" value="#4f46e5">
  </div>
</div>

<div class="bgen-field">
  <label>Text Color</label>
  <div class="bgen-color-row">
    <input type="color" id="bgen-color" value="#ffffff">
    <input type="text" id="bgen-color-hex" value="#ffffff">
  </div>
</div>

<div class="bgen-field">
  <label>Border Color</label>
  <div class="bgen-color-row">
    <input type="color" id="bgen-border-color" value="#4f46e5">
    <input type="text" id="bgen-border-color-hex" value="#4f46e5">
  </div>
</div>

<hr class="bgen-divider">

<!-- Typography & Size -->
<div class="bgen-section-title">Size & Typography</div>

<div class="bgen-field">
  <label>Font Size <span class="bgen-val" id="bgen-fontsize-val">16px</span></label>
  <input type="range" id="bgen-fontsize" min="10" max="36" value="16">
</div>

<div class="bgen-field">
  <label>Padding H <span class="bgen-val" id="bgen-padh-val">20px</span></label>
  <input type="range" id="bgen-padh" min="4" max="80" value="20">
</div>

<div class="bgen-field">
  <label>Padding V <span class="bgen-val" id="bgen-padv-val">12px</span></label>
  <input type="range" id="bgen-padv" min="2" max="40" value="12">
</div>

<div class="bgen-field">
  <label>Border Radius <span class="bgen-val" id="bgen-radius-val">8px</span></label>
  <input type="range" id="bgen-radius" min="0" max="60" value="8">
</div>

<hr class="bgen-divider">

<!-- Border -->
<div class="bgen-section-title">Border</div>

<div class="bgen-field">
  <label>Border Width <span class="bgen-val" id="bgen-bwidth-val">0px</span></label>
  <input type="range" id="bgen-bwidth" min="0" max="8" value="0">
</div>

<div class="bgen-field">
  <label>Border Style</label>
  <select id="bgen-bstyle" class="bgen-select">
    <option value="solid">Solid</option>
    <option value="dashed">Dashed</option>
    <option value="dotted">Dotted</option>
    <option value="double">Double</option>
  </select>
</div>

<hr class="bgen-divider">

<!-- Box Shadow -->
<div class="bgen-section-title">Box Shadow</div>

<div class="bgen-field">
  <label>Shadow X <span class="bgen-val" id="bgen-sx-val">0px</span></label>
  <input type="range" id="bgen-sx" min="-20" max="20" value="0">
</div>
<div class="bgen-field">
  <label>Shadow Y <span class="bgen-val" id="bgen-sy-val">4px</span></label>
  <input type="range" id="bgen-sy" min="-20" max="20" value="4">
</div>
<div class="bgen-field">
  <label>Shadow Blur <span class="bgen-val" id="bgen-sblur-val">14px</span></label>
  <input type="range" id="bgen-sblur" min="0" max="60" value="14">
</div>
<div class="bgen-field">
  <label>Shadow Spread <span class="bgen-val" id="bgen-sspread-val">0px</span></label>
  <input type="range" id="bgen-sspread" min="-10" max="20" value="0">
</div>
<div class="bgen-field">
  <label>Shadow Color</label>
  <div class="bgen-color-row">
    <input type="color" id="bgen-scolor" value="#4f46e5">
    <input type="text" id="bgen-scolor-hex" value="#4f46e5">
  </div>
</div>
<div class="bgen-field">
  <label>Shadow Opacity <span class="bgen-val" id="bgen-sopacity-val">30%</span></label>
  <input type="range" id="bgen-sopacity" min="0" max="100" value="30">
</div>

<hr class="bgen-divider">

<!-- Hover Effects -->
<div class="bgen-section-title">Hover Effects</div>

<div class="bgen-field">
  <label>Hover Background</label>
  <div class="bgen-color-row">
    <input type="color" id="bgen-hbg" value="#4338ca">
    <input type="text" id="bgen-hbg-hex" value="#4338ca">
  </div>
</div>

<div class="bgen-toggle-row">
  <label style="font-size:13px;font-weight:500;color:#333;">Scale on Hover</label>
  <label class="bgen-toggle">
    <input type="checkbox" id="bgen-hover-scale">
    <span class="bgen-toggle-slider"></span>
  </label>
</div>

<div class="bgen-field">
  <label>Hover Scale <span class="bgen-val" id="bgen-hscale-val">1.05</span></label>
  <input type="range" id="bgen-hscale" min="100" max="120" value="105">
</div>

<div class="bgen-toggle-row">
  <label style="font-size:13px;font-weight:500;color:#333;">Hover Shadow</label>
  <label class="bgen-toggle">
    <input type="checkbox" id="bgen-hover-shadow" checked>
    <span class="bgen-toggle-slider"></span>
  </label>
</div>

<div class="bgen-field">
  <label>Transition Duration <span class="bgen-val" id="bgen-trans-val">300ms</span></label>
  <input type="range" id="bgen-trans" min="50" max="1000" step="50" value="300">
</div>

<div class="bgen-preview-box light" id="bgen-preview-box">
  <span class="bgen-preview-label">Live Preview</span>
  <div class="bgen-theme-toggle">
    <button class="bgen-theme-btn active" data-theme="light">Light</button>
    <button class="bgen-theme-btn" data-theme="dark">Dark</button>
  </div>
  <button id="bgen-live-btn">Click Me</button>
</div>

<div class="bgen-code-block">
  <div class="bgen-code-tabs">
    <button class="bgen-code-tab active" data-tab="css">CSS</button>
    <button class="bgen-code-tab" data-tab="html">HTML</button>
  </div>
  <button class="bgen-copy-btn" id="bgen-copy-btn">Copy</button>
  <div class="bgen-code-output" id="bgen-code-output"></div>
</div>

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.