Botões parecem simples: um retângulo, uma cor e algumas palavras. Só que é através deles que o usuário realiza as principais ações do produto — comprar, assinar, cadastrar, enviar.
Por isso, um botão mal planejado pode transformar uma tarefa simples em frustração.
Nem todo botão precisa gritar
Crie hierarquia entre ações primárias e secundárias. A ação central deve ser imediatamente identificável pela cor e pelo peso visual, enquanto opções secundárias ou neutras devem adotar estilos outlines ou discretos.
O botão também precisa de espaço
O white space interno do botão não serve só para elegância: ele expande a área de toque e clique. Mantenha alturas mínimas generosas (como 40px a 48px em mobile) para prevenir cliques errados.
Pense no botão antes, durante e depois do clique
Um componente de interação precisa prever múltiplos estados: padrão, hover, pressionado, foco (acessibilidade), carregando (loading spinner) e desabilitado. A interface precisa comunicar o que acontece em cada instante.
Texto de botão não é espaço para explicar tudo
Mantenha o texto em uma única linha e prefira no máximo 3 palavras objetivas. Aja com verbos claros no infinitivo ou imperativo que digam exatamente o que acontecerá a seguir.
Formas conhecidas continuam funcionando
Preserve formas que o cérebro humano reconhece instantaneamente como clicáveis: cantos suavemente arredondados ou pílulas. Criatividade é excelente, mas nunca deve esconder a porta de entrada.
No fim, um botão precisa responder com clareza: "O que acontece quando eu clicar aqui?" Se a resposta é evidente, o botão cumpriu seu papel de transformar intenção em ação.