# Story 9.4: Component Styling - Buttons

## Epic Reference
**Epic 9:** Design & Branding Implementation

## User Story
As a **user**,
I want **consistent, professional button styling**,
So that **interactive elements are clear and visually appealing**.

## Acceptance Criteria

### Primary Button
- [ ] Background: Gold (#D4AF37)
- [ ] Text: Dark Navy Blue
- [ ] Hover: Light Gold (#F4E4B8)
- [ ] Border-radius: 6px
- [ ] Padding: 12px 24px

### Secondary Button
- [ ] Background: Transparent
- [ ] Border: 2px solid Gold
- [ ] Text: Gold
- [ ] Hover: Gold background, Navy text

### Disabled State
- [ ] Background: #CCCCCC
- [ ] Text: #666666
- [ ] No hover effect
- [ ] Cursor: not-allowed

### Danger Button
- [ ] Background: #E74C3C
- [ ] Text: White

### Features
- [ ] Loading states with spinner
- [ ] Focus states for accessibility
- [ ] Flux UI button integration

## Technical Notes

```css
/* Extend Flux UI buttons */
.btn-primary {
  @apply bg-gold text-navy hover:bg-gold-light rounded-md px-6 py-3 font-semibold transition-colors;
}

.btn-secondary {
  @apply bg-transparent border-2 border-gold text-gold hover:bg-gold hover:text-navy rounded-md px-6 py-3 font-semibold transition-colors;
}

.btn-danger {
  @apply bg-danger text-white hover:bg-danger/90 rounded-md px-6 py-3 font-semibold transition-colors;
}

/* Loading state */
.btn-loading {
  @apply relative pointer-events-none;
}

.btn-loading::after {
  content: '';
  @apply absolute inset-0 flex items-center justify-center;
  /* Spinner styles */
}
```

## Definition of Done
- [ ] Primary button styled
- [ ] Secondary button styled
- [ ] Danger button styled
- [ ] Disabled states work
- [ ] Loading states work
- [ ] Focus states accessible
- [ ] Tests pass

## Estimation
**Complexity:** Medium | **Effort:** 3 hours