10Componentes
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
Em fundo cream (manifesto)
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>