Botões CTA e áreas de atenção

1) Papel CTA e princípios

1. Um passo principal para a tela. Primary-CTA deve ser óbvio e único.
2. Contexto → ação. Ao lado do CTA há sempre uma breve explicação sobre «o que vai acontecer».
3. Visibilidade sem agressão. Contraste ≥ AA, tamanho suficiente e texto lido - em vez de efeitos gritantes.
4. Sequência. Os mesmos CTA agem da mesma forma em todas as telas.
5. Segurança. CTA arriscado é acompanhado de confirmação ou undo.

2) Hierarquia CTA

Primary é a ação chave da página («Apostar», «Reabastecer», «Confirmar»). 1 página.
O Secundary é um passo alternativo ou auxiliar («Mais informações», «Alterar método»).
Tertiary - botões de texto/fantasma (ghost) com o menor peso visual.
Destructive é um estilo separado (cor/ícone de aviso) + confirmação/undo.

Regra: se há mais de um CTA «forte» na tela, é provável escolher sem um alvo. Reestruture o fluxo.

3) Copiatagem CTA

Verbo + objeto, 2-4 palavras «Apostar», «Reequilibrar», «Definir limite».
«Tirar 2 000 ₴» é melhor do que «Enviar».
Evite negações duplas («Não anular») e metáforas vagas.
Para ações de risco, o subtítulo 1 é «Sem confirmação, pode cancelar 5 segundos».

4) Tamanho, forma, contraste

Área mínima do clique: ≥ 44 x 44 px (tac), ≥ 32 x 32 px (desctop).
Altura do botão: 40-48 px; raio de 10-12 px; Interior. recuo horizontal 16-20 px.
Contraste do texto para o fundo: WCAG AA; Não se baseie apenas na cor - use o ícone/editora.
Números de tabela para somas/koff.: 'fonte-variant-numérico: tabular-nums;'.

5) Estados e feedback

Hover/Focus/Action - visíveis e diferentes (focus-ring não esconder).
Busy (loading): resposta instantânea ≤ 100 ms, spinner/esqueleto em vez de «silêncio».
Disabled: não apenas «cinza» - Explique por que não está disponível (tooltip/inline-hint).
Undo/Confirm: para CTA destrutivo - Modal de confirmação ou painel com Undo 5-10 segundos.

html
<button class =" btn btn--primary" aria-busy = "false" id = "cta "> Bid </button>
<script>
const cta = document. getElementById('cta');
cta. addEventListener('click', async () => {
cta. setAttribute('aria-busy','true'); cta. disabled = true ;//instant try {
const r = await fetch('/api/bet', {method:'POST', headers:{'Idempotency-Key':crypto. randomUUID()}});
if(!r.ok) throw new Error();
//success toast/navigation
} catch {
//show reason and suggest Retry
} finally {
cta. disabled = false; cta. setAttribute('aria-busy','false');
}
});
</script>

6) Zonas de atenção (desctop) e de polegar (mobil)

Pattern de visão: F-pattern/Z-pattern, pontos «quentes»: topo-esquerdo (cabeçalho), topo-direito (secundário), inferior da tela (final).

• acima do dobro para telas curtas ou abaixo do formulário na linha de visão,
• painel «pegajoso» no celular (thumb-zona).
• Polegares móveis: mais confortável do que 1/3 da tela inferior, direito/esquerda - depende da mão dominante (por padrão, centro inferior/direito).

html
<footer class = "sticky-cta" role = "region" aria-label = "Action">
<div class = "sum"> Bid: 200 ₴</div>
<button class =" btn btn--primary "> Confirm </button>
</footer>

<style>
.sticky-cta{position:sticky; bottom:0; display:flex; gap:12px; align-items:center;
padding:12px 16px; background:var(--bg-elevated); box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.sticky-cta. btn{flex:1}
</style>

7) Colocação e recuo

Separe o primary-CTA dos elementos secundários com espaço branco (16-24 px).
Não coloque dois primary ao seu lado - um será uma escolha «falsa».
Nos formulários: CTA após o último campo; secundário - esquerda/CTA («Para trás», «Cancelar»).
Cartões/azulejos: CTA em baixo à direita; para listas longas - inline-CTA em cada cartão.

8) Animações e motion-patters

Entrada/saída: 120-180 ms, 'opacity/trans' (sem tremores layout).
Efeito Press: redução entre 96% e 98% + sombra → «clique sentido».
Para «sucesso»: microanimação de cheque curto ≤ 400 ms; é um ícone estático.
Evite efeitos infinitos (anti-pattern para um jogo responsável).

9) A11y e teclado

'role =' button 'não é necessário com o nativo' <button> '.
Focus-ring visível; a ordem de Tab é lógica. Enter/Space ativa CTA.
'aria-busy' ao carregar; use a região live 'role = «status» para se classificar.
O texto do botão está disponível no SR; ícones - com 'ária-hidden =' true 'e não o único hospedeiro de sentido.

10) Métricas e experiências

CTR CTA, Conversion after click, Time-to-Click desde aparecer até clicar.
Scroll-depth-click: proporção de cliques que aconteceram «acima do dobro »/» abaixo do dobro».
Zonas Heatmap (desktop/mob); Thumb-reach (mob).
Cancel/Undo rate para CTA arriscado.
A/B: texto, cor/contraste, tamanho, localização, painel «pegajoso» vs posição estática.

11) Sistema de design de tokens (exemplo)

json
{
"cta": {
"height": { "sm": 40, "md": 44, "lg": 48 },
"radius": 12,
"px": { "sm": 14, "md": 16, "lg": 20 },
"gap": 8,
"icon": 18,
"focusRing": { "width": 2, "offset": 2 },
"motion": { "pressMs": 90, "hoverMs": 160, "inMs": 160, "outMs": 120 }
},
"sticky": { "enabled": true, "shadow": "0 -8px 24px rgba(0,0,0,.12)" },
"a11y": { "contrastAA": true, "tabularNums": true }
}

css
.btn{height:44px; padding:0 16px; border-radius:12px; display:inline-flex; gap:8px; align-items:center; justify-content:center}
.btn--primary{background:var(--accent); color:var(--on-accent); font-weight:600}
.btn--ghost{background:transparent; border:1px solid var(--border); color:var(--fg)}
.btn[aria-busy="true"]{pointer-events:none; opacity:.85}
.btn:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px}

12) Pattern para iGaming

Apostar (Primary): ao lado, mostre o valor e o coeficiente; com atraso> 3 c - «Aguardando confirmação»... + Retry seguro.
Depósito: sticky-CTA em baixo mob. tela («Reabastecer»), secundária - «Editar método»; comissões visíveis/prazos ao lado.
Cachaça: O CTA está na tela do jogo/cupom; sempre mostra o valor atual do cachê; confirmação antes da execução.
Definir limite: CTA não agressivo; ao lado - «Vai entrar em vigor através»... Contraste AAA, sem piscar.
Torneios CTA «Aderir» no cartão do torneio + secundário «Regras/Prêmios».

13) Antipattern

Dois primary-CTA ao lado («Apostar» e «Comprar um bónus») - competição cognitiva.
«Cinzentos» disabled sem explicação.
Animações infinitas de atenção e piscar.
Um botão que muda a marcação e tira o foco.
O CTA está abaixo da grande «decoração» a ser dobrada.
Ícone em vez de texto (sem editora) em locais críticos.

14) Analistas de snippets

js function trackCTA(name, meta={}) {
window. dataLayer?.push({ event:'cta_click', name,...meta });
}
//example document. querySelector('#deposit'). addEventListener('click', ()=>{
trackCTA('deposit_click', { placement:'sticky_footer', amount:getAmount() });
});

15) QA-folha de cheque

Sentido e hierarquia

• Exatamente um primary-CTA na tela; os secundários não estão em conflito de peso.
• O texto do CTA é claro, sem duplas negações; ao lado, o que vai acontecer.

Disponibilidade

• Focus-ring vemos; Enter/Space funciona; 'aria-busy' ao carregar.
• Contraste texto/fundo ≥ AA; o ícone não é o único portador de sentido.

Comportamento

• Resposta instantânea ≤ 100 ms; estado busy e Retry em casos de falhas.
• Para os arriscados - confirmação ou undo.
• Sticky-CTA é colado corretamente no celular, não bloqueia o conteúdo.

Posicionamento

• CTA na área do polegar (mob) ou na linha de visão (desctop).
• Recuos suficientes (16-24 px) dos itens vizinhos.

Métricas

• São gravados CTR, Conversion after click, Time-to-Click, Undo-rate.
• Existem experiências de texto/cor/tamanho/localização.

16) Documentação em design

Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
Tokens de tamanho/contraste/animações, exemplos de copiação.
Pattern: «Um primary para a tela», «Sticky no celular», «Confirm/Undo para risco».
Do/Don 't galeria com telas reais e mapas térmicas.

Resumo curto

O CTA funciona quando tem um propósito, um lugar e um significado: um passo principal, um texto claro, um contraste suficiente, uma posição correta na área de atenção/polegar e um feedback honesto. Mantenha isso em um sistema de design, mede o comportamento - e os cliques se transformam em ações confiantes e conscientes, sem erros ou irritação.