Button Generator

Design beautiful, customizable buttons with real-time preview and ready-to-use CSS.

Preview

Generated CSS

.button {
  /* Base styles */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;

  /* Variant-specific styles */
  background-color: #3b82f6;
  color: #ffffff;
  border: none;

  /* Shadow */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);

  /* Hover state */
  &:hover {
    background-color: #2563eb;
    color: #ffffff;
  }

  /* Disabled state */
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Loading state */
  &.loading {
    cursor: wait;
  }
}

/* Icon styles */
.button svg {
  width: 1em;
  height: 1em;
}

/* Loading animation */
.button.loading svg {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

How to Use

1. Copy the CSS code above using the Copy button

2. Add the code to your stylesheet or <style> tag

3. Apply the .button class to your button elements

4. For loading state, add the .loading class

Button Design Guide

Buttons are crucial interactive elements that enable users to take actions and make choices. A well-designed button system creates consistency, improves usability, and guides users through your interface.

Pro Tip

Maintain a consistent button hierarchy across your application. Users should be able to quickly identify the most important actions on any given page through button styling.

Button Hierarchy

Primary Buttons (Solid)

Primary buttons should be used for:

Main calls-to-action (CTAs)
Form submissions
Completing a process
Confirming important actions

Use solid buttons sparingly - typically one primary action per section or screen. This helps create clear visual hierarchy and guides users toward the most important actions.

Secondary Buttons (Outline)

Secondary buttons are perfect for:

Alternative actions
Less important options
Supporting actions
Cancel or back actions

Outline buttons provide a clear alternative to primary actions while maintaining sufficient visibility and importance in the interface.

Tertiary Buttons (Ghost)

Ghost buttons are ideal for:

Toolbar actions
Card actions
Inline actions
Dense UI areas

Ghost buttons are subtle yet interactive, perfect for actions that should be available but not prominent. They work well in areas with multiple actions or where space is limited.

Link Buttons

Link buttons are best for:

Navigation actions
Inline text actions
Secondary navigation
Help or additional info

Link buttons should be used when the action is similar to navigation or when you want to maintain the text flow while providing interactivity.

Size and Spacing Guidelines

Button Sizes

Small (sm)

Height: 32px
Font size: 14px
Use in tight spaces or dense UIs
Good for secondary actions in toolbars

Medium (md)

Height: 40px
Font size: 16px
Default size for most actions
Balanced visibility and usability

Large (lg)

Height: 48px
Font size: 18px
Use for primary CTAs
Hero sections or important actions

Spacing and Layout

Padding

Maintain consistent horizontal padding
Add extra padding for buttons with icons
Scale padding with button size
Consider text length and wrapping

Button Groups

Keep 8-16px spacing between buttons
Align buttons consistently
Right-align form action buttons
Stack buttons vertically on mobile

Consistent spacing helps create a rhythm in your interface and improves visual organization. Always consider mobile viewports when planning button layouts.

States and Feedback

Interactive States

Hover State

Darken or lighten background
Change border color if present
Maintain sufficient contrast
Consider animation timing

Focus State

Add visible focus ring
Use high contrast colors
Ensure keyboard accessibility
Match browser focus styles

Active State

Show clear pressed state
Use subtle transform/scale
Quick feedback animation
Maintain text readability

Loading State

Show loading indicator
Disable interaction
Maintain button width
Preserve button position

Accessibility Considerations

Visual Accessibility

Maintain 4.5:1 contrast ratio for text
Use sufficient button sizing (minimum 44x44px touch target)
Provide clear visual feedback for all states
Consider color blind users when choosing colors

Screen Readers

Use proper button elements (<button>)
Add descriptive aria-labels when needed
Indicate loading and disabled states with ARIA
Ensure proper focus management

ARIA Attributes Guide

Use these ARIA attributes to enhance accessibility:

aria-disabled="true" for disabled buttons
aria-label="descriptive text" for icon-only buttons
aria-busy="true" for loading states
aria-expanded="true/false" for toggle buttons

Best Practices

Do's

✓
Use clear, action-oriented text
Write button text that clearly describes the action (e.g., "Save Changes" instead of "OK")
✓
Maintain consistent styling
Use the same button styles for similar actions across your interface
✓
Provide visual feedback
Ensure buttons have clear hover, focus, and active states
✓
Consider mobile interactions
Ensure buttons are large enough for touch interaction on mobile devices
✓
Use icons purposefully
Add icons only when they enhance understanding or provide visual cues

Don'ts

✗
Use vague or generic text
Avoid generic text like "Click Here" or "Submit" - be specific about the action
✗
Overuse primary buttons
Don't use multiple primary buttons in the same section - maintain clear hierarchy
✗
Ignore disabled states
Always provide clear visual indication and explanation for disabled buttons
✗
Neglect loading states
Always show loading indicators for actions that take time to complete
✗
Mix different button styles
Maintain consistency in button styling for similar types of actions

Common Use Cases

Form Actions

Primary action: Submit/Save

Secondary action: Cancel/Reset

Right-align form buttons, with the primary action on the right. Stack vertically on mobile.

Dialog Actions

Confirmation: OK/Confirm

Dismissal: Cancel/Close

Use clear, action-oriented text that describes what will happen.

Toolbar Actions

Icon buttons for common actions

Ghost variant for subtle presence

Group related actions together, use tooltips for clarity.