CSS Button Generator: How to Design Custom Buttons with CSS

# CSS Button Generator: How to Design Custom Buttons with CSS

Buttons are the primary interactive element on any website. They drive conversions, navigate users, and trigger actions. A well-designed button draws attention, communicates its purpose, and provides satisfying feedback when clicked. This guide covers CSS button styling from basic to advanced, including hover effects, animations, and accessibility requirements.

Basic CSS Button Styling

Starting Point

Every button starts with resetting browser defaults and adding your own styles:

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

Key properties explained:

`display: inline-flex` — Centers content and allows icons next to text

`padding` — Creates comfortable click targets (minimum 44x44px for accessibility)

`border: none` — Removes browser default border

`cursor: pointer` — Shows the hand cursor on hover

`transition` — Smooth state changes for hover/active effects

Button Style Variations

Solid (Filled) Button

The primary action button — high contrast, draws attention:

.button-solid {
  background-color: #6366f1;
  color: #ffffff;
}

.button-solid:hover {
  background-color: #4f46e5;
}

.button-solid:active {
  background-color: #4338ca;
  transform: translateY(1px);
}

Outline (Ghost) Button

Secondary actions — less visual weight than solid:

.button-outline {
  background-color: transparent;
  color: #6366f1;
  border: 2px solid #6366f1;
}

.button-outline:hover {
  background-color: #6366f1;
  color: #ffffff;
}

Text Button

Minimal styling for tertiary actions:

.button-text {
  background: none;
  color: #6366f1;
  padding: 8px 16px;
}

.button-text:hover {
  background-color: rgba(99, 102, 241, 0.1);
  border-radius: 6px;
}

Gradient Button

Eye-catching primary buttons:

.button-gradient {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  border: none;
}

.button-gradient:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

Hover Effects

Scale Effect

.button-scale:hover {
  transform: scale(1.05);
}

Shadow Lift

.button-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Background Slide

.button-slide {
  background-size: 200% 100%;
  background-image: linear-gradient(to right, #6366f1 50%, #ec4899 50%);
  transition: background-position 0.3s ease;
}

.button-slide:hover {
  background-position: -100% 0;
}

Border Animation

.button-border {
  position: relative;
  background: transparent;
  color: #6366f1;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.button-border::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  z-index: -1;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.button-border:hover::after {
  opacity: 1;
}

Button Sizes

Consistent sizing creates visual hierarchy:

.button-sm {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 6px;
}

.button-md {
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 8px;
}

.button-lg {
  padding: 16px 32px;
  font-size: 18px;
  border-radius: 10px;
}

.button-xl {
  padding: 20px 40px;
  font-size: 20px;
  border-radius: 12px;
}

Button States

Every button needs clear visual feedback for different states:

Disabled State

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

Loading State

.button-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.button-loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

Focus State (Accessibility)

.button:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

Icon Buttons

Button with Icon and Text

.button-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.button-icon svg {
  width: 18px;
  height: 18px;
}

Icon-Only Button

.button-icon-only {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

Accessibility requirement: Icon-only buttons must have an `aria-label` attribute describing the action.

Accessibility Best Practices

Minimum Touch Target Size

WCAG requires interactive elements to have a minimum size of 44x44 CSS pixels. This ensures buttons are usable on touch screens and by people with motor impairments.

Color Contrast

Button text must have at least:

4.5:1 contrast ratio - for normal text

3:1 contrast ratio - for large text (18px+ or 14px+ bold)

Check contrast at webaim.org/resources/contrastchecker

Focus Indicators

Keyboard users navigate with Tab and need to see which element is focused:

/* Never do this */
.button:focus {
  outline: none; /* Removes all focus indication */
}

/* Do this instead */
.button:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

`:focus-visible` only shows the outline for keyboard navigation, not mouse clicks.

Semantic HTML

Always use `<button>` for actions and `<a>` for navigation:

<!-- Action (submitting, toggling, opening) -->
<button class="button" type="button">Save Changes</button>

<!-- Navigation (going to a page) -->
<a href="/pricing" class="button">View Pricing</a>

Never use `<div>` or `<span>` as buttons — they're not keyboard accessible by default.

Descriptive Labels

Button text should describe the action:

Good: - "Add to Cart," "Send Message," "Download PDF"

Bad: - "Click Here," "Submit," "Go"

Button Design Principles

Visual Hierarchy

Use button styles to communicate importance:

Primary button - (solid/gradient) — One per section, the main action

Secondary button - (outline) — Alternative actions

Tertiary button - (text) — Low-priority actions

Consistent Styling

Use the same button styles throughout your site. Inconsistent buttons confuse users about what's clickable.

Appropriate Sizing

Buttons should be large enough to click comfortably

Primary actions should be larger than secondary actions

Mobile buttons should be larger than desktop buttons

Clear Feedback

Users should always know:

What they can click (hover cursor change)

What's happening (hover/active state changes)

What happened (loading states, success states)

Free CSS and Design Tools

Design buttons and CSS effects with these free Tovlix tools:

CSS Button Generator - Visual button designer with CSS code

Box Shadow Generator - Custom shadow effects

CSS Gradient Generator - Gradient backgrounds for buttons

Border Radius Generator - Rounded corner controls

Color Palette Generator - Button color schemes

CSS Animation Generator - Animated button effects

Conclusion

Great buttons combine clear visual hierarchy, satisfying hover feedback, proper accessibility, and consistent styling. Start with a solid base style, add hover and active states for feedback, ensure focus indicators are visible for keyboard users, and maintain a minimum 44x44px touch target. Use our free CSS Button Generator to visually design custom buttons and copy the CSS code directly into your project.