Generator Tools

CSS Button Generator

Design a CSS button visually, then copy ready-to-paste CSS, HTML, or a Tailwind class. Solid or gradient background, shadow, border, hover, and live preview.

Quick presets

Live preview

Force hover

The preview uses the same CSS the tool will copy. Hover over the button or toggle Force hover to preview the hover state.

Label

Padding X28px

Padding Y14px

Font size16px

Border radius12px

Letter spacing0.0px

Font weight

Uppercase text

Background

Color

Text

Border

Border width0px

Border color

Shadow

Shadow color

Hover

Transition duration180ms

CSS

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  background: #3b82f6;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 20px -8px rgba(59, 130, 246, 0.45);
  cursor: pointer;
  transition: all 180ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(59, 130, 246, 0.45);
  filter: brightness(1.05);
}

.btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 3px;
}

HTML

<button class="btn" type="button">Get started</button>

Tailwind class

inline-flex items-center justify-center px-[28px] py-[14px] text-[16px] font-[700] text-[#ffffff] bg-[#3b82f6] border-0 rounded-[12px] shadow-[0_8px_20px_-8px_rgba(59,_130,_246,_0.45)] cursor-pointer transition-all duration-[180ms] hover:-translate-y-px hover:brightness-105

Tailwind uses arbitrary values so the class works as-is in a v3 or v4 project with no config changes.

How to use

Pick a preset (Primary, Sunset gradient, Outline, Soft pill, Ghost, or Neon glow) to start from a designed button.
Edit the label, then tune padding, font size, font weight, letter spacing, and corner radius using the sliders.
Choose a solid color or a two-stop gradient background, set the text color, border width and color, and a shadow style (soft, hard, or glow).
Pick a hover effect (lift, brighten, or invert) and a transition duration, then hover the preview or tick Force hover to inspect the hover state.
Copy the CSS, the HTML button element, or the Tailwind class string. Paste into your project to ship the button.

About this tool

CSS Button Generator is a visual builder for HTML buttons. Tweak the label, padding, font size and weight, letter spacing, text color, background (solid or two-stop linear gradient), border, corner radius, shadow style, and hover treatment, and the preview button updates instantly using the exact CSS the tool will copy. A Force hover toggle pins the hover state so you can fine-tune the lift, brightness, or color invert without chasing your cursor across the screen. Six starting presets cover the most common button shapes designers reach for: a solid Primary, a Sunset gradient pill, a clean Outline, a Soft pill, a dark Ghost button, and a Neon glow call-to-action. Output is offered in three formats. The CSS panel emits a self-contained .btn block with base, :hover, and :focus-visible rules ready to paste into any stylesheet or component. The HTML panel emits a <button type="button"> element with the label escaped so the snippet is safe to drop into your markup. The Tailwind panel emits a single class string built from arbitrary values so it works in a Tailwind v3 or v4 project with no config changes. Everything runs locally in your browser, so the colors, copy, and brand styles you design here never leave your device.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Button Generator

How to use

About this tool

You may also like

CSS Gradient Generator

CSS Box Shadow Generator

CSS Border Radius Generator

CSS Animation Generator

Color Format Converter