Pílula. Glow. Lift no hover.

CTAs primários sempre roxo-600 com inset hairline + glow. Ghost para secundários. Link para terciários. Variante on-cream usa roxo-700 sólido.

Em fundo dark

Quero fazer parte → Conhecer programas Saber mais → Pequeno → Grande →

Em fundo cream (manifesto)

Receber o manifesto → Ler completo

Anatomia

/* Primary CTA */
.e-btn-primary {
  background: var(--e-purple-600);
  border-radius: var(--e-r-pill);     /* pílula */
  box-shadow: var(--e-sh-cta);        /* glow + hairline */
  padding: 14px 28px;
  transition: all 300ms var(--e-ease);
}
.e-btn-primary:hover {
  background: var(--e-purple-700);
  transform: translateY(-1px);
}

Hierarquia

Primary: uma única ação por dobra. Roxo-600 sólido + glow.
Ghost: ações secundárias. Borda hairline, transparente.
Link: ações terciárias inline. Underline animado.
On-cream: exclusivo para dobras com inversão. Roxo-700 sólido (sem glow, fundo cream já contrasta).

Snippet · pronto pra colar

HTML · cole no seu projeto

<a href="#" class="e-btn e-btn-primary">
  Quero fazer parte <span>→</span>
</a>

<a href="#" class="e-btn e-btn-ghost">Conhecer programas</a>

<a href="#" class="e-btn e-btn-link">Saber mais →</a>

<!-- Tamanhos: e-btn-sm · default · e-btn-lg -->
<a href="#" class="e-btn e-btn-primary e-btn-lg">Grande <span>→</span></a>

<!-- Em fundo cream -->
<a href="#" class="e-btn e-btn-on-cream">Ler manifesto <span>→</span></a>