← Biblioteca componentes/conversao/cta-pilula-gigante/ficha.md CódigoTela cheia
conversao/cta-pilula-gigante

CTA em pílula gigante

🟢 estavel complexidade baixa prefixo plg- cta fecho botao tipografia contato institucional sem javascript

Incluir · as linhas que se colam num site novo, depois do core (CLAUDE.md §10)

<link rel="stylesheet" href="componentes/conversao/cta-pilula-gigante/estilo.css">

markup.html · 37 linhas · 1,8 KB

<!-- ==========================================================================
     CTA EM PÍLULA GIGANTE — o botão É a dobra
     Prefixo: plg-
     Requer: core (tokens, base, motion.css, motion.js) + este estilo.css
     SEM JAVASCRIPT.

     Uma frase curta em cima e, embaixo, uma pílula da largura da coluna com
     a chamada em corpo de display. Não há título de seção nem parágrafo: a
     peça é o botão. Serve de fecho de página quando o argumento já foi feito
     e só falta o gesto. Embaixo, os caminhos alternativos em texto pequeno.

     PARADA, e isso é decisão: nas referências o texto corre dentro da
     pílula, e letreiro que anda sozinho por mais de cinco segundos pede um
     controle de pausa (WCAG 2.2.2) — botão de pausa DENTRO de um botão não
     fecha. O hover troca a cor, como o .btn-primary do core; nada se move.
     ========================================================================== -->

<section class="sec-dark sec-pad plg">
  <div class="wrap">
    <p class="plg-frase" data-rv>Cada relação que começamos é pensada para durar décadas. A primeira conversa é só o começo.</p>

    <div class="plg-slot" data-rv data-d="1">
      <a class="plg-pilula" href="#agendar">
        <span class="plg-texto">Vamos conversar</span>
        <span class="plg-seta" aria-hidden="true">
          <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10L10 4M5 4h5v5"/></svg>
        </span>
      </a>
    </div>

    <p class="plg-alternativas" data-rv data-d="2">
      Prefere escrever? <a class="plg-alt" href="mailto:contato@exemplo.invalid">contato@exemplo.invalid</a>
      <span aria-hidden="true">·</span>
      <a class="plg-alt" href="tel:+551130000000">(11) 3000-0000</a>
    </p>
  </div>
</section>

estilo.css · 59 linhas · 2,2 KB

/* ==========================================================================
   CTA EM PÍLULA GIGANTE — plg-
   O botão é a dobra: uma pílula da largura da coluna, parada.
   Tokens usados: --fg --fg-2 --fg-muted --rule-2 --accent --accent-ink
                  --dark --display --radius-pill --ease
   Parafuso local:
     --plg-altura   altura da pílula
   ========================================================================== */

.plg-frase{
  max-inline-size:52ch;margin-inline:auto;text-align:center;
  font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:var(--fg-2);
}

.plg-slot{display:flex;margin-top:clamp(28px,4vh,44px)}

/* A mesma dupla do .btn-primary: --accent de fundo, --dark de tinta. No
   hover o miolo esvazia e a borda fica, como no core — o botão não salta
   nem cresce (CLAUDE.md §6). */
.plg-pilula{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,28px);
  min-block-size:var(--plg-altura,clamp(112px,13vw,190px));
  padding-inline:clamp(28px,5vw,80px);
  border:1px solid var(--accent);border-radius:var(--radius-pill);
  background:var(--accent);color:var(--dark);
  transition:background .4s var(--ease),color .4s var(--ease);
}
.plg-pilula:hover{background:transparent;color:var(--accent)}
.plg-pilula:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

.plg-texto{
  font-family:var(--display);font-weight:700;
  font-size:clamp(32px,6vw,92px);line-height:1;letter-spacing:-.035em;
  text-align:center;
}
.plg-seta{
  flex:0 0 auto;display:grid;place-items:center;
  inline-size:clamp(44px,5vw,76px);block-size:clamp(44px,5vw,76px);
  border:1.5px solid currentColor;border-radius:var(--radius-pill);
}
.plg-seta svg{inline-size:42%;block-size:42%}

.plg-alternativas{
  margin-top:22px;text-align:center;
  font-size:13.5px;color:var(--fg-muted);
}
.plg-alt{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--rule-2);transition:color .25s}
.plg-alt:hover{color:var(--accent-ink,var(--accent))}

@media(prefers-reduced-motion:reduce){
  .plg-pilula{transition:none}
}

@media(max-width:560px){
  .plg-pilula{min-block-size:96px}
  .plg-seta{display:none}
}

O botão é a dobra. Uma frase curta em cima e, embaixo, uma pílula da largura da coluna com a chamada em corpo de display — "Vamos conversar" — e a seta num disco. Sob ela, e-mail e telefone em texto pequeno para quem prefere outro caminho.

O problema que ela resolve: no fim de uma página longa, o argumento já foi feito. Mais um título e mais um parágrafo só adiam o gesto. Aqui a peça gráfica e o alvo do clique são a mesma coisa, e não há como não ver o que fazer.

Quando usar

Quando não usar

Padrão editorial

Slot Regra
Frase 8 a 24 palavras: o último argumento
Chamada 8 a 18 caracteres: convite ou imperativo curto
Alternativas e-mail e telefone por extenso. Opcional

O que mantém a peça: a chamada cabe numa linha. Acima de 18 caracteres ela quebra em duas no notebook, a pílula engorda, e o gesto vira um bloco de texto.

Especificação dos assets

Nenhum.

Como usar

<link rel="stylesheet" href="componentes/conversao/cta-pilula-gigante/estilo.css">

Ganchos

Gancho Papel
--plg-altura altura da pílula. Padrão clamp(112px,13vw,190px)
.plg-slot onde mora o data-rv, fora do link

Gotchas

Movimento reduzido / toque

O hover perde a transição de cor. No toque, a pílula inteira é o alvo.

Histórico

Origem Quando O quê
referência: brucira.com 2026-09-29 Clone de referência, reescrito do zero

Referências visuais: brucira.com, muradov.design e vandslab, via cta.gallery. Estava travado na fila por tom e foi liberado pelo dono em 2026-09-29. Registro consolidado em projetos/referencias-externas.md.