# Buttons & CTA affordances (`buttons.md`)

Patterns observed on marketing templates (`services`, `service-industry`, `contact`, etc.) & sticky systems.

## Primary (pill)

```blade
<a href="{{ $localizedRoute('contact.index') }}"
   class="inline-flex items-center px-8 py-4 bg-criazo-primary text-white rounded-full font-semibold hover:bg-criazo-hover smooth-transition shadow-lg hover:shadow-xl">
    {{ __('messages.services.schedule_call') }}
</a>
```

Characteristics:

- `rounded-full`, generous horizontal padding (`px-8`), vertical `py-4`.
- Icon suffix optional (arrow) with `ml-1.5` spacing.

## Secondary (outline / neutral)

```blade
<a href="#" class="inline-flex items-center px-6 py-4 bg-white border-2 border-neutral-200 text-neutral-900 rounded-full font-semibold hover:border-criazo-primary hover:text-criazo-primary smooth-transition">
    {{ __('messages.services.learn_more') }}
</a>
```

## Ghost / text link

Underlined or border-bottom emphasis with teal color `text-criazo-primary` when inline within paragraphs.

## Dashboard buttons

- Primary filter: `px-6 py-2.5 ... bg-criazo-primary text-white rounded-criazo`.
- Secondary neutral: `bg-black/5 text-black/70 rounded-criazo`.
- Icon circle buttons: `p-2 rounded-full text-black/40 hover:bg-black/5`.

## Accessibility

- Minimum 44px hit target on mobile enforced globally.
- Focus styles rely on global `:focus-visible` outline (`#00b7b2`).

## Anti-patterns

- Square primary buttons on marketing unless matching calculator UI.
- Using `bg-black` for primary positive CTA (reserve for destructive / dark hero contrast exceptions).
- Mixing multiple primary colors in one viewport without hierarchy.

## Related components

- [`navigation.md`](navigation.md) for header actions.
- [`conversion-patterns.md`](conversion-patterns.md) for placement strategy.