Toolcroft

CSS Button Generator - Custom Button Style Designer

Developer Tools

Design CSS buttons with a live preview. Adjust colors, hover states, borders, spacing, and typography; check contrast and copy CSS and HTML.

Accessibility checks

Default text contrast: 3.68:1 — below AA (4.5:1); below AAA (7:1). Hover text contrast: 5.17:1 — meets AA (4.5:1); below AAA (7:1).

Approximate button height: 44px — meets the 44px touch-target guideline.

Contrast uses the selected solid colors. Height is an estimate; font metrics and line-height can change the rendered size. Contrast and target-size checks are advisory.

.btn {
  display: inline-block;
  background-color: #3b82f6;
  color: #ffffff;
  border: 0px solid #000000;
  border-radius: 6px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  
  
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
  text-decoration: none;
}

.btn:hover {
  background-color: #2563eb;
  color: #ffffff;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible,
.btn[data-preview-state="focus"] {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }

  .btn:hover,
  .btn:active {
    transform: none;
  }
}

How to use this tool

  1. Customise the button label, colors, size, and shape using the controls.
  2. Hover over the preview button, or select Focus and Disabled to inspect those states.
  3. Copy the CSS and HTML tabs and paste them into your project.

Button design best practices

A good button communicates its purpose clearly, responds visually to interaction, and meets accessibility requirements. Key principles:

  • Contrast ratio: WCAG 2.1 Level AA requires a minimum 3:1 contrast ratio for UI components (4.5:1 for normal text).
  • Target size: Touch targets should be at least 44×44 px (WCAG 2.5.5) to be easily tappable on mobile. The check above estimates button height; make sure its width also reaches 44 px in your page layout.
  • Focus indicator: Add :focus-visible styles with an outline or ring so keyboard users can see which button is focused. The generated CSS includes a blue ring, and the Focus preview lets you inspect it.
  • Hover/active feedback: The generated CSS includes a subtle translateY(-1px) lift on hover and returns to rest on :active. A reduced-motion rule removes both transitions and movement for visitors who request less motion.

Button states

StateSelectorPurpose
Hover:hoverMouse pointer is over the button. Apply a slightly darker/lighter background and optional transform.
Focus:focusElement has keyboard focus (any method). Add an outline or ring for visibility.
Focus-visible:focus-visibleKeyboard focus gets a visible outline. Generated CSS includes this rule; the Focus preview applies the same outline without requiring keyboard navigation.
Active:activeButton is being pressed (mouse-down state). Reduce transform or darken background to simulate a "click" effect.
Disabled:disabledGenerated CSS dims disabled buttons, removes the shadow and movement, and changes the cursor. The selector also covers aria-disabled="true".
Reduced motionprefers-reduced-motionThe generated media rule removes hover movement and transitions when the visitor has asked the operating system for less motion.

The accessibility checks compare the text color with the solid background color for both the normal and hover states. They convert each sRGB channel to relative luminance, then compare the brighter value with the darker one using the WCAG contrast-ratio formula. For example, white text on the default blue background is about 3.68:1, which is below the 4.5:1 AA target for normal-sized text. Larger text has lower AA and AAA thresholds, so the readout accounts for the selected size and weight. This is a useful first check before copying a button for a sign-in or checkout form, but the result is advisory: a gradient, image, or changing page background can affect real contrast. Use the Color Contrast Checker to compare colors in more detail.

The height estimate adds font size, vertical padding, and border width; it is not a measurement of the final button in every browser. Font metrics, line-height, zoom, and surrounding CSS can change the rendered dimensions. A 44 px height also does not guarantee a 44 px width, so check both dimensions on the page where the button will be used.

Accessibility requirements

Always use a native <button> element when the control performs an action, and <a> when it navigates to a new page. Custom elements with role="button" require additional ARIA attributes (tabindex="0", Enter/Space keypress handlers) - native buttons handle all of this automatically.

If a button has no visible text (icon-only), add an aria-label describing its action: <button aria-label="Close menu"><X icon /></button>.

Common button styles

These are examples to build by adjusting the controls; the generator does not currently provide one-click preset chips.

  • Primary: High-contrast, filled background. For the main action on a page (Submit, Save, Buy Now).
  • Secondary: Outlined or low-contrast fill. For secondary actions (Cancel, Back, Learn More).
  • Ghost: Transparent background, subtle border or underline. For tertiary actions that should not dominate visually.
  • Destructive: Red or high-alert color. For dangerous actions (Delete, Remove, Unsubscribe).
  • Icon-only: No text, just an icon. Requires aria-label for accessibility. Use sparingly; text labels are clearer.

Frequently asked questions

How do I add a gradient background?

This generator uses solid colors. To add a gradient, replace background-color with background: linear-gradient(direction, color1, color2), or create the gradient separately and paste its CSS here.

Can I generate a pill-shaped button?

Yes - set the border-radius to a large value (e.g. 50px). The preview updates in real time so you can see exactly how it looks.

Related tools

Browse all developer tools