Botões que Funcionam: Estados e Hierarquia

Como desenhar botões que indicam claramente o que vai acontecer. Incluímos hover, active, e disabled states que não precisam de explicação.

6 min de leitura Iniciante Março 2026

Botões de diferentes estilos e estados em interface de website moderno com hover, active e disabled states visualmente distintos

Por que os Estados Importam

Um botão não é apenas um botão. É uma conversa entre a interface e o utilizador. Quando alguém clica, passa o rato por cima ou tenta interagir com algo desativado, espera feedback imediato. Sem estados visuais claros, a experiência fica confusa e frustrante.

A boa notícia? Criar botões que comunicam bem não é complicado. Basta entender os cinco estados principais e aplicá-los de forma consistente em todo o produto. Neste guia, mostramos exatamente como fazer isso.

Diagrama visual mostrando os cinco estados de um botão: default, hover, focus, active e disabled com cores e sombras distintas

Os Cinco Estados do Botão

Cada estado comunica algo diferente. Conheça cada um.

Default

O estado inicial do botão. Deve ser convidativo mas não agressivo. Cores moderadas, sem efeitos excessivos. Aqui o utilizador sabe que pode clicar, mas ainda não interagiu.

Hover

Quando o rato passa por cima. Mudança subtil mas óbvia — cor mais escura, ligeira elevação, ou sombra aumentada. O utilizador recebe feedback: “sim, isto é interativo”. A transição deve ser rápida, entre 150-200ms.

Focus

Essencial para acessibilidade. Aparece quando o utilizador navega com teclado. Um contorno (outline) visível, geralmente com 2-3px. Deve contrastar bem com o fundo. Nunca remova este estado, mesmo que não goste.

Active

No momento exacto do clique. O botão parece “pressionado” — pode encolher ligeiramente, a sombra diminui, ou a cor intensifica-se. É instantâneo. O utilizador sente que algo aconteceu.

Disabled

Quando o botão não pode ser usado. Cores desbotadas (cinzento 40-50% de opacidade), cursor muda para “not-allowed”. O utilizador compreende imediatamente que não pode clicar. Sem confusão.

Hierarquia: Nem Todos os Botões são Iguais

Aqui está uma coisa que muita gente erra: colocar todos os botões com o mesmo visual. Resultado? O utilizador não sabe qual clicar. Precisa de hierarquia.

Existem três níveis. O primário é o mais importante — geralmente preenchido com a cor de marca, texto branco. É o botão “fazer agora”. O secundário tem menos peso — contorno apenas ou fundo cinzento claro. Para ações alternativas. O terciário? Quase invisível até clicar. Apenas texto, sem fundo.

A regra prática: cada página tem no máximo UM botão primário. Se tem dois primários, nenhum é realmente primário. E isso confunde o utilizador.

Comparação lado a lado de três hierarquias de botões: primário em azul preenchido, secundário com contorno, terciário apenas texto com hover effect

Como Aplicar: Passo a Passo

Na prática, isto fica assim.

Defina o Default

Escolha a cor, tamanho e padding. Para botões primários, use a cor da marca. Espaçamento: pelo menos 12px horizontal, 8px vertical. O texto deve ser legível — contraste mínimo 4.5:1.

Adicione o Hover

Escureça a cor 10-15%, ou adicione uma sombra subtle. Tempo: 150-200ms de transição. Teste em diferentes dispositivos — no mobile, o hover não existe, mas o active deve funcionar bem.

Focus é Obrigatório

Contorno de 2-3px, cor diferente da cor do botão. Offset de 2-4px do botão. Testável: use Tab no teclado para navegar. Se não consegue ver o focus, está errado.

Active é Instantâneo

Sem transição aqui. Transform: scale(0.98) funciona bem — o botão encolhe ligeiramente. Ou diminua a sombra. O efeito deve durar apenas enquanto o clique está ativo.

Disabled é Claro

Opacidade 50%, cursor: not-allowed. Se o botão fica disabled, o utilizador deve compreender porquê. Adicione um ícone de aviso ou mensagem tooltip se necessário.

Erros Comuns que Deve Evitar

Vemos isto frequentemente em produtos mal desenhados.

Sem transição no hover: O botão muda de cor instantaneamente. Fica áspero e pouco polido. Use transition: all 0.15s ease.
Focus removido com CSS: outline: none é o inimigo da acessibilidade. Não faça isto. Nunca.
Todos os botões iguais: Se não consegue diferenciar primário de secundário, o utilizador também não consegue.
Disabled mas ainda clicável: Teste com JavaScript. Um botão disabled deve realmente estar disabled.
Sem feedback de loading: Se o clique leva tempo, adicione um spinner ou texto “A processar…”. O utilizador quer saber que algo está a acontecer.

Comparação antes e depois de cinco erros comuns em design de botões: transição áspera, focus removido, hierarquia inexistente, disabled não funcional, sem feedback

Recursos Úteis

Ferramentas que facilitam o trabalho.

Design Tokens

Defina cores, tamanhos e tempos de transição uma vez. Reutilize em todo o projeto. Ferramentas como Figma tokens ou Style Dictionary facilitam isto.

WebAIM Contrast Checker

Verifica se o contraste entre texto e fundo atinge 4.5:1. Gratuito, rápido, essencial.

Teste com Teclado

Tab para navegar, Enter para clicar. Se os botões não respondem, o focus está errado. Sem ferramentas — apenas use o seu teclado.

Teste no Mobile

Sem mouse. O hover não existe. O touch é mais impreciso. Os botões precisam de ser maiores. Mínimo 44x44px para tocar.

A Verdade Simples

Botões são pequenos, mas importantes. Quando funcionam bem, o utilizador não pensa neles — apenas clica e segue em frente. Quando funcionam mal? Fica confuso, frustrado, e desiste.

Aplicar estados e hierarquia corretamente não é complexo. É apenas uma questão de pensar: o que precisa o utilizador saber? Default, hover, focus, active, disabled. Cinco estados. Três níveis de hierarquia. Pronto. Agora os seus botões comunicam claramente.

A próxima vez que desenhar um botão, pense em cada estado. Teste no teclado. Verifique o contraste. E pergunte-se: “O utilizador sabe o que vai acontecer quando clicar?” Se a resposta é sim, está bem feito.

Continue a Aprender

Quer explorar mais sobre design de componentes UI? Temos mais guias sobre formulários, cards e navegação.

Ver Mais Artigos

Nota Importante

Este guia apresenta princípios gerais de design de interface. As melhores práticas podem variar consoante o contexto, dispositivo e requisitos de acessibilidade específicos do seu projeto. Sempre teste com utilizadores reais e ferramentas de validação. As recomendações aqui apresentadas são baseadas em normas WCAG 2.1 e boas práticas atuais de design (2026), mas devem ser adaptadas às necessidades concretas do seu produto.