Links levam a lugares, botões fazem coisas

Aqui está a regra que resolve quase todos os casos: um link leva você a outro lugar, enquanto um botão faz algo acontecer aqui mesmo. 🧭

Um link faz uma navegação. Ao clicar nele, a página ou a URL muda, como ao acessar outro artigo ou uma nova seção.

Um botão executa uma ação no local: envia um formulário, abre um menu ou alterna uma configuração sem sair da página.

Leitores de tela anunciam a função em voz alta. Os usuários ouvem link ou botão; por isso, o elemento correto estabelece a expectativa certa antes da ação.

Isso não é apenas uma questão estética. Um botão é acionado com Espaço ou Enter, mas um link só é ativado com Enter. As teclas acompanham a função.

Faça uma pergunta: este controle muda onde estou ou muda o que aparece na tela? Navegação significa link; ação significa botão.

Se fizer sentido abrir um controle em uma nova aba ou adicioná-lo aos favoritos, trata-se de navegação; use um link real com href.

A estilização não muda o significado. Um botão pode parecer um link, e um link pode parecer um botão, mas o elemento define a função.

As pessoas usam uma div ou span estilizada e adicionam um manipulador de clique. Parece funcionar, mas não tem função semântica nem suporte ao teclado.

Para enviar um formulário, use um botão do tipo submit. Isso é uma ação, não uma navegação; portanto, um link estaria errado nesse caso.

Para levar o usuário à sua página de contato, use um link. Isso é navegação pura, e um botão confundiria todos.

Links levam a lugares; botões executam ações. Combine o elemento com a intenção para obter a função correta, as teclas corretas e usuários satisfeitos. 🎉