Botão
Resumo
Um botão é um elemento interativo que aciona uma ação ao ser clicado ou tocado. Ele comunica claramente sua capacidade de ser clicado por meio de um estilo visual e fornece feedback sobre a interação do usuário, tornando-se um componente fundamental para habilitar ações do usuário em interfaces.
Anatomia
O botão, geralmente possui os seguintes itens acompanhando ele:
Label: Texto escrito no botão para indicar a ação
Ícone (opcional): Vetor para auxiliar no entendimento do botão
Escolha quando utilizar ícones e textos conforme o contexto
Somente ícone: Utilizado quando o espaço é limitado e o ícone por si só já é entendido de forma universal.
Somente texto: O significado já é obvio pelo contexto
Texto com ícone: Utilizado quando usuário ainda não aprendeu o sistema ou a UI é utilizada por públicos diversosacionadas à entrada de dados, como indicar o tipo de entrada.
Gap: Espaço entre o ícone e o texto
Padding: Espaçamento entre o conteúdo com as extremidades, no botão, existem 3: text_padding, icon_padding e button_padding
Na maioria dos casos, algumas dessas correções de padding serão necessárias:
Caso o ícone seja circular ou assimétrico: Ajuste o text_padding em 0.05–0.2em na vertical para corrigir.
Equilíbrio óptico vs equilíbrio geométrico: Botão com padding simétrico parece desalinhado porque o gap entre ícone e texto carrega um peso assimétrico. Para corrigir, faça a seguinte fórmula:
padding_do_canto_do_icone = padding_atual - gap
opacidade do botão = 90%
Outer margin (safe space): Espaço entre o botão e os elementos ao seu redor
Bordas: Delimita o perímetro clicável do botão
No caso das bordas, utilize os conceitos abaixo para definir o visual.
Considere o contexto e a personalidade da marca.
Sútil: Profissional, Minimalista, Sério
Moderado: Amigável, Moderno
Alto: Divertido, Criativo, Ousado
Os valores podem precisar de ajustes em diferentes tamanhos de tela.
Estabeleça uma escala sistemática (4, 8, 12, 16)
Variantes
Esses são os principais tipos de botões:
Botão Primário: Indica onde o usuário avança ou conclui sua jornada, geralmente, possui fundo sólido e só existe 1 por sessão visível
Botão Secundário: Botão de ação secundário, geralmente ação oposta ao principal, visualmente pode ser representado pela borda e texto de mesma cor ou com um fundo da cor primária com 20% de opacidade
Botão Terciário: Ações que o usuário não está procurando fazer no momento, geralmente é representado sem cor de fundo ou bordas.
Botão Destrutivo: Botões que acionam ações destrutivas com a cor predominante sendo o vermelho. Deve ser acompanhado de uma etapa extra de confirmação.
Botão de CTA: Foco em acionar eventos que beneficiam o negócio, tem menos foco em ajudar o usuário a concluir a jornada.
Botão Flutuante: Destacado e flutuante na interface, comumente usado para ações principais em aplicativos mobile.
Também existem variações de tamanho, as mais comuns são:
Small: padding 16px 9px; font-size:14 px; // aprox 30px de altura
Medium: padding 20px 13px; font-size:14 px; // aprox 40px de altura
Large: padding 20px 16px; font-size:14 px; // aprox 48px de altura
No caso da apple, esses valores podem ser diferentes.
Estados
Cada estado tem um jeito de ser mostrado visualmente:
Normal (Default): Sem nenhuma alteração visual
Hover (Passagem do Mouse): Geralmente acompanhado por uma alteração de cor, borda ou sombra (15% de mudança perceptível nos valores).
Ativo (Pressed): Estado quando o botão está sendo pressionado, mudando ligeiramente seu estilo para indicar que a ação está em andamento.
Focused: Usado para navegação via teclado com espessura mínima de 3px, offset do botão (2–4px), cor de contraste com fundo 3:1 mínimo
Desabilitado (Disabled): Indica que a ação não está disponível, geralmente com uma aparência apagada (50% opacidade) e sem resposta a interação.
Carregando (Loading): Exibe um indicador visual (como um ícone de carregamento) para mostrar que uma operação está em andamento.
Acessibilidade
A
Cor não pode ser o único meio de distinguir um botão (WCAG 1.4.1).
Instruções para usar o botão não podem depender só de característica sensoria (WCAG 1.3.3).
AA
O texto do label precisa de contraste de pelo menos 4.5:1 contra o fundo do botão (WCAG 1.4.3).
O fundo do botão, suas bordas e qualquer elemento que identifique o botão ou seu estado precisam de pelo menos 3:1 (WCAG 1.4.11).
A área de toque do botão precisa ser de no mínimo 24×24px (WCAG 2.5.8).
O indicador de foco precisa estar visível quando o botão é alcançado por teclado (WCAG 2.4.7).
AAA
O texto do label com contraste de 7:1 contra o fundo do botão (WCAG 1.4.6).
A área de toque do botão de no mínimo 44×44px (WCAG 2.5.5).
O indicador de foco precisa ter pelo menos a espessura equivalente a um perímetro de 2px ao redor do botão e contraste de 3:1 entre o estado focado e o não-focado (WCAG 2.4.13).
Boas práticas
A ação do botão deve ser clara
Garanta que os rótulos sejam descritivos. Tente associar ações familiares a ícones familiares. Coloque-os em uma área específica da página para que os usuários saibam o que eles representam.
Copy Avançado em Botões
Ajuste o microcopy dos botões de ação com base na etapa da jornada do usuário. O texto do botão deve mudar conforme o progresso do usuário no funil.
Na primeira interação: "Descubra como funciona"
Em páginas de produto: "Quero esse produto"
No checkout: "Finalizar minha compra"
Usar verbos que combinam com o estado mental do cliente em cada etapa.
Testar variações curtas (no máximo 4 palavras), claras e direcionadas.
Essa personalização discreta aumenta a sensação de controle do usuário, melhorando a confiança e, claro, a conversão.
Estilize os botões de forma consistente
Defina a estilização dos caracteres (BOTÃO TESTE, Botão teste, botão teste) e escolha a quantidade de palavras por etiqueta de botão: Considere usar duas palavras para os botões principais e secundários e mais palavras para os botões de chamada à ação (CTA)
Considere usar a estrutura “verbo” + “substantivo” ao escrever os rótulos dos botões
Ordenação dos botões primários e secundários
Isso é muito variável, o windows costuma colocar o botão primário à esquerda e o mac/ios a direita.
Adicione reticências ao final do título quando um botão abrir outra janela, visualização ou aplicativo
Use um botão de altura flexível somente quando precisar exibir conteúdo alto ou de altura variável.
Referências
https://balsamiq.com/learn/buttons/
https://component.gallery/components/button/
https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html
https://developer.apple.com/design/human-interface-guidelines/buttons
https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/