HomeToolsButton Generator

CSS WORKSPACE

Button Generator

Make a change, inspect the result, and take the output into your project.

How to use this tool ↓

Configuration

Presets
Content & Sizing
24
12
Typography
16px
Background
Border
0px
8px
Effects
4
6
1
0px
Interactive Preview

Hover over the button to see effects

Generated CSS
css
.custom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background-color: #3b82f6;
  border: 0px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.custom-button:hover {
  background-color: #2563eb;
}
A PRACTICAL GUIDE

Design all the states of a button

A button should clearly communicate an action before it communicates a style. Choose a short, specific label and decide whether the action is primary or secondary. A real button is appropriate for an action; an anchor is appropriate for navigation to another location.

How to use this tool

  1. Choose padding, typography, background, border, and corner radius. Test a longer label as well as the shortest one.
  2. Adjust hover styling without changing the control’s size. Add focus and disabled states in your production stylesheet.
  3. Copy the markup and CSS into your page. Set type="button" unless the control is meant to submit a form, and connect the intended behavior.

The minimum height gives the control a practical interaction area while padding lets the width grow with its label. An offset focus outline is visible independently of the background color.

Read the reference documentation ↗
Example to try in your project
.action {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 0;
  background: #2563eb;
  color: #fff;
}
.action:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }

Before you ship

Generated styles do not implement your click handler or loading behavior. Avoid disabling a control without explaining why, and do not use a decorative div as a keyboard-inaccessible replacement.

Explore a related tool