Softonic

CSS Button Generator

Step 1 / 4 Button text

Button text

Enter a plain-text label. HTML-like text is escaped in the generated snippet.

Your label and design stay in this browser. Funnel pages use session storage and do not put your content in the URL.

Build a button and inspect its default, hover, keyboard-focus, active, disabled, and loading states before using it. Choose a solid or two-color gradient fill, border, spacing, corners, shadow, and state colors. The generator escapes the button label, keeps the design in your browser, and produces both semantic HTML and bounded CSS.

How to generate a CSS button

  1. 1

    Write the label

    Enter plain text for the visible button name. HTML-like characters are preserved as text rather than executed.

  2. 2

    Set the base design

    Choose a solid or gradient background, text and border colors, size, padding, radius, and shadow.

  3. 3

    Define interaction states

    Set hover, active, and focus colors and movement. Disabled and loading rules are included automatically.

  4. 4

    Check the guidance

    Review the lowest text contrast, focus-indicator contrast, and the enforced minimum target size before exporting.

  5. 5

    Copy or download

    Copy the escaped HTML and CSS together, or download a standalone UTF-8 HTML preview.

What the generated code includes

The HTML uses a real <button type="button"> with its visible label inside a span. The CSS covers six useful presentations:

  • Default for the normal resting appearance
  • Hover for pointer devices
  • Keyboard focus through :focus-visible
  • Active while the control is pressed
  • Disabled through the native disabled property
  • Loading through aria-busy="true"

Your application still decides when the button becomes disabled or busy. The generator supplies the presentation rules; it does not invent application state or attach a click action.

Contrast guidance is a check, not a certificate

The editor calculates the lowest text contrast among the base, gradient endpoint, hover, and active colors. It uses 4.5:1 as the normal-text target. It also compares the focus outline with the light preview surface and uses 3:1 as the non-text target.

Those numbers help catch common problems, but the finished page may place the button on a different surface. Recheck focus and border contrast in the real layout. Disabled controls are shown with reduced opacity and need a clear nearby explanation when their purpose is not obvious.

Target size and motion

The exported rule enforces a minimum inline and block size of 44 px. This is a comfortable target for many touch interfaces and is larger than the 24 CSS px minimum in WCAG 2.2 Success Criterion 2.5.8. Layout, spacing, exceptions, and platform guidance still matter in the final product.

Hover and press movement is removed when the user requests reduced motion. The loading indicator slows down rather than disappearing, so the busy state remains visible.

Safe output boundaries

The visible label is normalized, limited to 120 grapheme clusters, stripped of invisible direction-control characters, and HTML-escaped in the snippet and download. Colors must be six-digit hexadecimal values. Every numeric setting is rounded and clamped to the range shown beside its control.

The complete editor works in browser memory. In the optional four-page flow, a versioned design is kept in sessionStorage for the current tab. The label and design values are not placed in funnel URLs or sent through Livewire.

Using the loading state

Set and remove the busy attribute from application code:

<button type="button" class="generated-button" aria-busy="true" disabled>
  <span class="generated-button__label">Saving</span>
</button>

aria-busy communicates that an update is in progress. Add disabled as well when repeat activation must be prevented. When the operation finishes, remove both attributes and move any important success or error message to a suitable status region.

Frequently Asked Questions

No. It provides contrast calculations, a visible focus rule, reduced-motion handling, semantic HTML, and a 44 px minimum target. Conformance depends on the final page, surrounding colors, content, behavior, and testing.

No. The editor keeps the label and design in browser memory. The optional multi-page flow uses session storage in the same tab and keeps authored values out of URLs and Livewire requests.

A button is correct for actions such as submitting, opening, or toggling. Use an anchor with a real href for navigation, then adapt the generated class if the link should share the same visual style.

The editor reports the failure and leaves the complete output selected in a readable text area for manual copying. It only shows success after the Clipboard API completes.

Related Tools

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

Phone Validator

Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.

BBCode to HTML Converter

Convert BBCode (bulletin-board markup) to clean HTML. Handles formatting tags, lists, quotes, code, images, links and tables.

Random Color Palette Generator

Generate random color palettes from 2 to 15 swatches, choose a vibrant, pastel, muted or dark style, then copy HEX codes or CSS variables.