LocalToolsColeção de ferramentas offline para navegador

Categoria: Desenvolvimento

Gerador de botões CSS

Ideia nossaFalta uma ferramenta?

Monte botões CSS personalizáveis com prévia ao vivo e código pronto para copiar

Projete um botão visualmente e copie HTML e CSS limpos. Ajuste cores, borda, raio, espaçamento, sombra e estilos de hover e foco no seu navegador.

Hover e foco

Prévia

Passe o cursor pela prévia, ou pressione Tab para chegar até ela, e veja os estilos de hover e de foco.

HTML
<button class="button" type="button">Get started</button>
CSS
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1px solid #2f6f4f;
  border-radius: 6px;
  background: #2f6f4f;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover {
  background: #255a40;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.16);
}

.button:active {
  transform: translateY(0);
}

/* Keyboard focus stays visible — never replace this with outline: none */
.button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:hover {
    transform: none;
  }
}

O trecho usa um <button> de verdade e mantém visível o contorno de :focus-visible. Remover esse contorno deixaria quem navega por teclado sem saber onde está.

A prévia e o código gerado são construídos no seu navegador.

Tudo nesta página é processado no seu navegador. Nada é enviado.

Para que serve

Este é um editor visual para um botão: cores, borda, raio, espaçamento, tamanho e peso da tipografia, sombra e o que muda no hover. A prévia é estilizada pelo mesmo CSS que você copia, então passar o cursor ou chegar nela com Tab mostra os estados reais, não uma aproximação. Duas coisas não ficam ao acaso. A marcação é um `<button type="button">` de verdade, não uma div estilizada, então ela recebe foco e funciona no teclado de graça. E a saída sempre mantém um contorno visível de `:focus-visible` — o bug de acessibilidade mais comum em CSS de botão gerado é um `outline: none` que deixa quem usa teclado sem ideia de onde está na página.

Como usar

  1. Defina o rótulo e o nome da classe e escolha as cores de fundo, texto e borda.
  2. Ajuste raio, espessura da borda, espaçamento e tamanho e peso da fonte até a prévia ficar boa.
  3. Defina o fundo do hover e o anel de foco e copie o HTML e o CSS.

Privacidade

Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.

Perguntas frequentes

Posso criar estilos de hover?
Sim. O fundo do hover, a elevação opcional e a mudança de sombra fazem parte do CSS gerado, como uma regra :hover separada que você pode editar depois.
O botão precisa de JavaScript?
Não. A saída é HTML e CSS puros. Você só precisa de script para o que o botão faz quando é pressionado.
Posso copiar o HTML e o CSS separadamente?
Sim — cada um tem seu próprio botão de copiar, então você leva o CSS para uma folha de estilos e a marcação para onde ela pertence.
Por que o CSS inclui um contorno de foco?
Porque sem ele quem navega por teclado não consegue ver em qual controle está. A regra gerada usa :focus-visible, então o anel aparece no foco por teclado sem surgir a cada clique do mouse.
O código gerado é local?
Sim. Todas as configurações, a prévia e os trechos gerados ficam no seu navegador.

Voltar para todas as ferramentas