# Design System - Buttons

## Overview
Button components with three variants for different use cases. All buttons include the signature Orange→Pink→Blue ripple effect on hover.

---

## Button Variants

### Primary Button
Main action button with dark background.

| Property | Value |
|----------|-------|
| Width | 97px |
| Height | 24px |
| Background | #1a1a2e |
| Text Color | #ffffff |
| Border | none |
| Border Radius | 6px |
| Font | Space Grotesk |
| Font Size | 12px |
| Font Weight | 500 |

**Usage:** Primary actions, form submissions, CTAs

---

### Secondary Button
Alternative action button with light background.

| Property | Value |
|----------|-------|
| Width | 97px |
| Height | 24px |
| Background | #ffffff |
| Text Color | #383737 |
| Border | none |
| Border Radius | 6px |
| Box Shadow | 0px 1px 2px 0px rgba(0, 0, 0, 0.05) |
| Font | Space Grotesk |
| Font Size | 12px |
| Font Weight | 500 |

**Usage:** Secondary actions, cancel buttons, alternative options

---

### Tertiary Button
Minimal button with border only.

| Property | Value |
|----------|-------|
| Width | 97px |
| Height | 24px |
| Background | transparent |
| Text Color | #848383 |
| Border | 1px solid #848383 |
| Border Radius | 6px |
| Font | Space Grotesk |
| Font Size | 12px |
| Font Weight | 500 |

**Usage:** Destructive actions, low-emphasis actions, links

---

## Interaction States

### Hover State
All buttons use the ripple effect animation on hover.

**Ripple Animation:**
- Grid: 10 columns × 3 rows
- Animation: Radiates outward from cursor position
- Duration: 0.6s per cell
- Easing: ease-out

**Color Sequence:**
```
0%   → Orange: rgba(251, 146, 60, 0.5)
40%  → Pink: rgba(244, 114, 182, 0.4)
70%  → Blue: rgba(147, 197, 253, 0.3)
100% → Transparent
```

### Active State
- Transform: scale(0.98)
- Transition: 0.2s ease

### Hover Scale
- Transform: scale(1.02)
- Transition: 0.2s ease

---

## Code Reference

### HTML Structure
```html
<button class="btn btn-primary">
    <div class="ripple-grid"></div>
    <div class="btn-content">Button</div>
</button>
```

### CSS Classes
| Class | Description |
|-------|-------------|
| `.btn` | Base button styles |
| `.btn-primary` | Primary variant |
| `.btn-secondary` | Secondary variant |
| `.btn-tertiary` | Tertiary variant |
| `.ripple-grid` | Container for ripple cells |
| `.ripple-cell` | Individual ripple cell |
| `.btn-content` | Button text container |

---

## Design Tokens

### Colors
| Token | Value | Usage |
|-------|-------|-------|
| Primary Background | #1a1a2e | Primary button fill |
| Primary Text | #ffffff | Primary button text |
| Secondary Background | #ffffff | Secondary button fill |
| Secondary Text | #383737 | Secondary button text |
| Tertiary Border | #848383 | Tertiary button border |
| Tertiary Text | #848383 | Tertiary button text |

### Typography
| Token | Value |
|-------|-------|
| Font Family | Space Grotesk |
| Font Size | 12px |
| Font Weight | 500 |

### Spacing
| Token | Value |
|-------|-------|
| Border Radius | 6px |
| Button Width | 97px |
| Button Height | 24px |

---

## Prototype
`buttons-prototype/index.html` - localhost:8082