Como remover os estilos padrão de um botão em CSS

Botões HTML têm estilos aplicados automaticamente pelo navegador: fundo cinza, borda, padding próprio e fonte que não herda do restante da página. Esses estilos variam entre Chrome, Firefox, Safari e Edge, o que causa inconsistência visual.

Para criar um botão com design personalizado do zero, o primeiro passo é limpar esses estilos. O código abaixo é o mínimo necessário:

button {
  all: unset;
  cursor: pointer;
}

Simples assim. O all: unset remove praticamente todos os estilos padrão do navegador e herda propriedades do elemento pai quando possível. O cursor: pointer é adicionado de volta porque all: unset também remove esse estilo, e usuários esperam ver o cursor de mão sobre botões clicáveis.

Por que botões têm estilos diferentes em cada navegador

Cada navegador aplica uma folha de estilos padrão chamada user agent stylesheet. Para botões, os padrões mais comuns são:

• Fundo cinza (background-color: ButtonFace no Chrome)
• Borda sólida com espessura variável
• Padding vertical e horizontal
• Fonte do sistema (não herda font-family da página)
• Aparência nativa do sistema operacional (appearance: auto)

Quando você define apenas color: red num botão, por exemplo, o fundo cinza, a borda e o padding padrão continuam. Por isso é necessário limpar tudo antes de começar o estilo personalizado.

Método 1: all:unset (mais simples)

button {
  all: unset;
  cursor: pointer;
  /* agora estilize do zero */
}

O que all: unset faz: aplica unset em todas as propriedades CSS ao mesmo tempo. Propriedades herdáveis (como color e font-family) herdam do elemento pai. Propriedades não herdáveis (como background e border) voltam para seus valores iniciais.

Suporte: compatível com todos os navegadores modernos (Chrome 37+, Firefox 27+, Safari 9.1+, Edge 79+). Para projetos que precisam suportar navegadores muito antigos, use o Método 2.

Atenção: all: unset também remove o estilo de foco (outline). Isso quebra a acessibilidade para quem navega pelo teclado. Sempre adicione um estilo de foco personalizado:

button {
  all: unset;
  cursor: pointer;
}

button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

Método 2: reset propriedade por propriedade (mais controle)

Este método é mais verboso mas permite controle preciso sobre o que é removido:

button {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}

button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Use este método quando precisar de compatibilidade com navegadores mais antigos ou quando o all: unset estiver causando efeitos colaterais inesperados em outros estilos da página.

Comparação dos métodos

Accessibility: por que não remover o outline sem substituir

O outline é o indicador visual de foco que aparece quando o usuário navega com Tab no teclado. Remover ele sem adicionar um substituto torna o site inacessível para pessoas que não usam mouse.

/* Errado: remove acessibilidade */
button:focus {
  outline: none;
}

/* Correto: substitui por um estilo personalizado */
button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 3px;
  border-radius: 2px;
}

O pseudo-seletor focus-visible só aplica o estilo quando o foco vem do teclado (Tab), não do clique do mouse. Isso mantém a acessibilidade sem alterar a aparência para quem usa mouse.

A propriedade outline pode ser acessada via MDN Web Docs para referência completa em developer.mozilla.org.

Como estilizar o botão depois de limpar

Com os estilos padrão removidos, você parte do zero:

button {
  all: unset;
  cursor: pointer;
  
  /* seu estilo personalizado */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: #0066cc;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #0052a3;
}

button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 3px;
}

button:active {
  transform: scale(0.98);
}

Para testar o código rapidamente sem criar um projeto local, cole o HTML e CSS no CodePen ou JSFiddle.

Se você está construindo interfaces com HTML e CSS dentro de um site WordPress, veja como colocar um texto em cima de uma imagem em HTML para outras técnicas de posicionamento CSS, ou consulte o que é uma div em HTML para entender a estrutura de containers que envolve os botões.

Perguntas frequentes

O que é all: unset em CSS?

É uma propriedade CSS que aplica o valor unset em todas as outras propriedades ao mesmo tempo. Para propriedades herdáveis, o valor é herdado do pai. Para não herdáveis, volta ao valor inicial. É a forma mais rápida de limpar todos os estilos padrão de um elemento.

Qual a diferença entre all: unset, all: initial e all: revert?

all: unset herda do pai onde possível. all: initial força tudo para os valores iniciais do CSS (ignora herança). all: revert desfaz os estilos do autor e volta para os estilos padrão do navegador. Para limpar um botão, all: unset é geralmente a melhor escolha.

Por que o botão ainda parece estilizado após usar all: unset?

Se algum estilo ainda persiste, pode ser que um estilo mais específico esteja sobrescrevendo o reset. Verifique a especificidade do seletor e use as ferramentas de desenvolvedor (F12) para ver qual regra está sendo aplicada.

Posso usar all: unset em outros elementos além de botão?

Sim. all: unset funciona em qualquer elemento HTML. É útil para remover estilos padrão de listas (ul, ol), links (a), inputs e outros elementos que têm aparência nativa do browser.

Remover o outline do botão afeta a acessibilidade?

Sim. O outline indica foco visual para usuários de teclado. Remova apenas se substituir por um estilo alternativo de foco. Use button:focus-visible em vez de button:focus para aplicar o estilo de foco somente na navegação por teclado.