🎨 Button Design System Guide

Buttons є найважливішими interactive elements в UI. Вони ініціюють actions, navigate користувачів, та signal importance через visual hierarchy. Well-designed button system включає clear primary/secondary distinction, appropriate sizing, accessible states (hover, focus, active, disabled), та consistent styling across entire site. Для mushroom education hub, buttons drive critical actions: "Start Growing Guide", "Safety Checklist", "Calculate Dosage", "View Research". Цей comprehensive guide охоплює complete button taxonomy, CSS implementations, accessibility (keyboard navigation, screen readers), та best practices from leading design systems (Material Design, Bootstrap, Tailwind).

🎨 Button Hierarchy

Button Types

Usage: Primary для main CTA, Secondary для alternative actions, Ghost для low-emphasis actions

Button Sizes

Button States

Icon Buttons

Button Groups

💻 CSS Implementation

Base Button Styles:

/* Reset та base styles */
button {
  /* Reset browser defaults */
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: none;
}

/* Base button class */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Space між icon та text */
  
  padding: 12px 28px;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  
  border-radius: 8px;
  border: none;
  cursor: pointer;
  
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;
}

/* Focus outline (accessibility) */
.btn:focus-visible {
  outline: 3px solid rgba(106, 17, 203, 0.5);
  outline-offset: 2px;
}

Primary Button:

.btn-primary {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(106, 17, 203, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(106, 17, 203, 0.3);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

Secondary Button (Outlined):

.btn-secondary {
  background: white;
  color: #6a11cb;
  border: 2px solid #6a11cb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
  background: #6a11cb;
  color: white;
  transform: translateY(-1px);
}

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

Ghost Button:

.btn-ghost {
  background: transparent;
  color: #6a11cb;
  border: none;
}

.btn-ghost:hover {
  background: rgba(106, 17, 203, 0.1);
}

.btn-ghost:active {
  background: rgba(106, 17, 203, 0.2);
}

Button Sizes:

.btn-small {
  padding: 8px 18px;
  font-size: 0.875em;
}

.btn-medium {
  padding: 12px 28px;
  font-size: 1em;
}

.btn-large {
  padding: 16px 36px;
  font-size: 1.125em;
}

Icon Button:

.btn-icon {
  width: 44px; /* Minimum touch target */
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

/* Icon-only (square) */
.btn-icon-square {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
}

/* With text and icon */
.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-with-icon svg,
.btn-with-icon img {
  width: 20px;
  height: 20px;
}

Button Groups:

.btn-group {
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-group .btn {
  border-radius: 0; /* Remove individual border radius */
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0;
}

.btn-group .btn:last-child {
  border-right: none;
}

.btn-group .btn:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.btn-group .btn:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

♿ Accessibility

Keyboard Navigation:

/* Focus styles (WCAG 2.1 compliant) */
.btn:focus-visible {
  outline: 3px solid rgba(106, 17, 203, 0.5);
  outline-offset: 2px;
}

/* Remove focus indicator на mouse click */
.btn:focus:not(:focus-visible) {
  outline: none;
}

Screen Reader Support:

<!-- Descriptive button text -->
<button class="btn btn-primary">
  Download Cultivation Guide
</button>

<!-- Icon buttons need aria-label -->
<button class="btn btn-icon" aria-label="Add to favorites">
  ❤️
</button>

<!-- Disabled state -->
<button class="btn btn-primary" disabled aria-disabled="true">
  Submit (form incomplete)
</button>

<!-- Loading state -->
<button class="btn btn-primary" aria-busy="true">
  <span class="spinner"></span>
  Loading...
</button>

Touch Targets (Mobile):

/* Minimum 44x44px (WCAG 2.1) */
.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 28px; /* Exceeds minimum */
}

/* Small buttons still meet minimum */
.btn-small {
  min-height: 44px;
  padding: 8px 20px; /* Adjusted */
}

🍄 Mushroom Hub Button Examples

Call-to-Action Buttons:

<!-- Primary CTA -->
<button class="btn btn-primary btn-large">
  🍄 Start Growing Guide
</button>

<!-- Secondary actions -->
<button class="btn btn-secondary">
  📚 Browse Species Library
</button>

<button class="btn btn-ghost">
  Learn More →
</button>

Functional Buttons:

<!-- Safety checklist -->
<button class="btn btn-primary">
  ✓ View Safety Checklist
</button>

<!-- Dosage calculator -->
<button class="btn btn-secondary">
  🧮 Calculate Dosage
</button>

<!-- Download PDF -->
<button class="btn btn-primary">
  ⬇️ Download PF Tek PDF
</button>

Navigation Buttons:

<!-- Pagination -->
<div class="btn-group">
  <button class="btn btn-secondary">← Previous</button>
  <button class="btn btn-secondary">1</button>
  <button class="btn btn-primary">2</button>
  <button class="btn btn-secondary">3</button>
  <button class="btn btn-secondary">Next →</button>
</div>

✅ Button Design Checklist

Implementation Checklist:

  • ☐ Primary button clearly distinct (gradient або solid color)
  • ☐ Secondary button visually secondary (outlined або muted)
  • ☐ Ghost button minimal (transparent background)
  • ☐ 3 sizes defined: Small, Medium, Large
  • ☐ All states styled: Normal, Hover, Active, Disabled, Focus
  • ☐ Focus outline visible (keyboard navigation)
  • ☐ Minimum touch target 44x44px (mobile)
  • ☐ Icon buttons have aria-label
  • ☐ Disabled buttons have aria-disabled="true"
  • ☐ Transitions smooth (0.3s)
  • ☐ Color contrast meets WCAG AA (4.5:1)
  • ☐ Button groups properly connected