Toolcroft

Color Tools

CSS Button Generator - Custom Button Style Designer

Design custom CSS buttons with live preview. Control background, text, hover colors, border-radius, padding, font size, shadows, and more. Generates clean HTML and CSS ready to paste.

.btn {
  display: inline-block;
  background-color: #3b82f6;
  color: #ffffff;
  border: 0px solid transparent;
  border-radius: 6px;
  padding: 10px 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);
}

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.
  • Focus indicator: Add :focus-visible styles with an outline or ring so keyboard users can see which button is focused.
  • Hover/active feedback: The generated CSS includes a subtle translateY(-1px) lift on hover and returns to rest on :active.

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-visibleElement has keyboard focus (not mouse click). Browser hides the outline for mouse clicks but shows it for keyboard navigation.
Active:activeButton is being pressed (mouse-down state). Reduce transform or darken background to simulate a "click" effect.
Disabled:disabledButton is not interactive. Reduce opacity to ~50% and set cursor: not-allowed or cursor: default.

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 variants

  • 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.