Gerador de botão CSS

Crie um botão de texto com HTML e CSS. Edite sua forma e cores, veja o controle nativo ou um estado simulado e copie o código.

Prévia

Sombras grandes podem ser cortadas na prévia; o CSS copiado não muda.

Botão e estados

Digite texto literal e uma classe. Edite cada estado exportado.

Texto do botão

Classe

Fonte

Tamanho da fonte (px)

12–32 px

Espessura

Espaçamento horizontal (px)

0–64 px

Espaçamento vertical (px)

0–32 px

Largura da borda (px)

0–8 px

Raio dos cantos (px)

0–64 px

Estado para editar

Fundo

Texto

Borda

Usar sombra

Sombra compartilhada

Deslocamento horizontal (px)

-32–32 px

Deslocamento vertical (px)

-32–32 px

Desfoque (px)

0–48 px

Expansão (px)

-16–16 px

Cor da sombra

Exportar botão desativado

Código do botão

O botão exportado está ativado.

Modo de prévia

Fundo da prévia

Normal: 5,17:1 Atende à referência de 4.5:1

Ao passar o mouse: 6,70:1 Atende à referência de 4.5:1

Pressionado: 8,72:1 Atende à referência de 4.5:1

Desativado: 3,90:1 Controles inativos são isentos deste requisito de contraste de texto.

Contorno de foco em relação ao fundo: 5,17:1

A referência considera 16 px e espessura 600; limite 4.5:1.

O contorno usa uma referência de 3:1 em relação ao fundo escolhido.

As proporções de cores sólidas não certificam acessibilidade. Verifique o foco, os estilos ao redor e o uso real.

Estado e contraste

Primeiro plano #FFFFFF sobre fundo #2563EB.

Luminância relativa: primeiro plano 1.000000, fundo 0.153152.

(mais claro + 0,05) / (mais escuro + 0,05) = 5,17:1.

A referência considera 16 px e espessura 600; limite 4.5:1.

Pressionado substitui Hover; focus-visible adiciona um contorno independente.

A proporção exibida é arredondada; a comparação usa o valor sem arredondar.

HTML

<button type="button" class="generated-button" dir="auto">Salvar alterações</button>

CSS

button.generated-button {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 20px;
  border: 1px solid #2563EB;
  border-radius: 8px;
  background-color: #2563EB;
  background-image: none;
  color: #FFFFFF;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  text-shadow: none;
  vertical-align: middle;
  opacity: 1;
  cursor: pointer;
  box-shadow: none;
}

button.generated-button:hover:not(:disabled) {
  background-color: #1D4ED8;
  color: #FFFFFF;
  border-color: #1D4ED8;
  box-shadow: none;
}

button.generated-button:active:not(:disabled) {
  background-color: #1E40AF;
  color: #FFFFFF;
  border-color: #1E40AF;
  box-shadow: none;
}

button.generated-button:focus-visible:not(:disabled) {
  outline: 3px solid #2563EB;
  outline-offset: 3px;
}

button.generated-button:disabled {
  background-color: #E5E7EB;
  color: #6B7280;
  border-color: #9CA3AF;
  box-shadow: none;
  cursor: default;
}

O texto e os estilos ficam neste navegador; a cópia é explícita.

Crie, confira e copie

Digite texto literal e uma classe aceita. Escolha fonte, tamanho, espessura, espaçamento e borda.
Edite cores e sombras dos estados. Foco altera somente o contorno. Escolha se o botão exportado ficará desativado.
Use Ao vivo e Tab para conferir o foco real. Confira as indicações de contraste e copie HTML e CSS separadamente.

Semântica nativa e estados

O HTML usa um botão nativo type="button", uma classe e texto literal. Ele não inclui ação; adicione-a em sua aplicação.

Passar o mouse e pressionar podem ocorrer juntos. Pressionado vem depois e redefine todas as propriedades, inclusive uma sombra ausente. O foco adiciona um contorno independente.

O atributo disabled desativa o botão de verdade; não é apenas uma cor. Os demais controles continuam disponíveis.

Uma classe limitada mantém HTML e seletores alinhados. Espaços, pontos, vírgulas e pseudoclasses são recusados.

Exemplos de texto e contraste

Salvar <rascunho> & "enviar" 🚀 permanece texto literal. O HTML escapa os sinais para não criar outro elemento.

O exemplo usa azul mais escuro com sombra ao passar o mouse e retorna ao azul sem sombra quando pressionado.

Preto sobre branco tem contraste 21:1; cores iguais têm 1:1. Os limites dependem do tamanho e da espessura e são comparados sem arredondamento.

Limites de estilo e acessibilidade

A ferramenta oferece cores sólidas opacas, uma forma de sombra compartilhada e fontes do sistema. Não cria gradientes, animações nem ações.

Estados simulados não testam o foco do teclado. Use Ao vivo; uma sombra cortada na prévia não altera o CSS copiado.

Contraste e dimensões mínimas de 44 pixels não certificam acessibilidade. Verifique também contexto, teclado e tecnologias assistivas.

Estilos, largura e fontes da página de destino podem afetar o resultado. O fundo da prévia não é exportado; texto desativado tem uma isenção.

Edição local

A ferramenta não envia dados nem cria histórico, links com valores ou requisições de fontes remotas. A cópia é explícita. Serviços do site e extensões são independentes.

Perguntas sobre botões

Pressionado vem depois de Hover e define toda a superfície. O contorno focus-visible é independente.

Não. É uma amostra inerte. Use Ao vivo e Tab para verificar o foco nativo.

Não. O comportamento é definido pelo atributo nativo disabled, não pela cor.

Não. Digite uma classe de até 48 caracteres que comece com letra ASCII e continue com letras, números, hífens ou sublinhados.

O texto é literal. Os sinais são escapados no HTML; nenhum elemento ou manipulador é inserido.

Não. As proporções consideram cores sRGB opacas e hipóteses de fonte; não certificam foco nem uso do teclado.

Cada estado escolhe sua sombra. Se estiver desligada em Pressionado, o CSS emite none mesmo quando Hover tem sombra.

Nenhum histórico ou link com dados é criado. A área de transferência recebe apenas o código que você escolhe copiar.

Fontes

Normas e orientações para botões nativos e seus estados.

Revisado em 13 de novembro de 2026.

O gerador aceita uma gramática limitada, não todo CSS válido.

SVG para PNG

Converta um ficheiro SVG local ou código colado em PNG, com dimensões definidas, transparência e tipos de letra incluídos.

Abrir ferramenta — SVG para PNG

Gerador de filtros CSS

Ordene e repita efeitos CSS, compare uma amostra e copie a declaração exata.

Abrir ferramenta — Gerador de filtros CSS

Calculadora de tamanho de fonte fluido

Defina o tamanho da fonte em duas larguras de janela. Copie o CSS com unidades relativas à raiz e confira o modelo calculado com os mesmos coeficientes exportados.

Abrir ferramenta — Calculadora de tamanho de fonte fluido

Gerador CSS de border-radius

Edite oito raios, visualize uma caixa e copie o CSS em pixels ou porcentagens.

Abrir ferramenta — Gerador CSS de border-radius

Gerador CSS Grid

Crie um exemplo de CSS Grid com trilhas, posições e áreas nomeadas. Veja a prévia, copie CSS ou HTML e baixe o exemplo completo.

Abrir ferramenta — Gerador CSS Grid

Gerador CSS Flexbox

Crie um exemplo Flexbox com controles de contêiner e item, eixos de layout explícitos, CSS e HTML correspondentes e um download local de exemplo completo.

Abrir ferramenta — Gerador CSS Flexbox

Gerador CSS de sombra de texto

Crie sombras de texto ordenadas, visualize texto simples e copie o CSS exato.

Abrir ferramenta — Gerador CSS de sombra de texto

Gerador de transformação CSS

Componha transformações 2D CSS repetíveis, edite px ou conversão percentual e origem, inspecione uma caixa de referência e copie as declarações atuais exatas.

Abrir ferramenta — Gerador de transformação CSS

Gerador de sombra CSS

Crie camadas box-shadow ordenadas, visualize e copie o código CSS.

Abrir ferramenta — Gerador de sombra CSS

Marca d’água em imagens

Adicione texto ou logotipo a imagens, confira os resultados e baixe arquivos individuais ou um ZIP.

Abrir ferramenta — Marca d’água em imagens

Gerador de gradiente CSS

Crie gradientes lineares ou radiais com cores, opacidade e pontos ajustáveis.

Abrir ferramenta — Gerador de gradiente CSS

Conversor de cores

Converta valores sRGB HEX, RGB e HSL compatíveis com alfa e precisão explícita.

Abrir ferramenta — Conversor de cores

Imagem para texto (OCR)

Reconheça texto impresso em PNG ou JPEG local, escolha o idioma e confira ou corrija antes de copiar ou baixar.

Abrir ferramenta — Imagem para texto (OCR)

Leitor de QR Code em imagem

Leia um QR Code de um PNG ou JPEG local e examine o texto ou os bytes sem abrir links.

Abrir ferramenta — Leitor de QR Code em imagem

Verificador de contraste de cores

Compare as cores do primeiro plano e do fundo, ajuste a opacidade e confira os limites numéricos de contraste WCAG para texto e detalhes essenciais da interface.

Abrir ferramenta — Verificador de contraste de cores

Calculadora de tamanho de impressão e resolução

Calcule o tamanho da impressão, os pixels necessários e o PPI efetivo com margens ou corte.

Abrir ferramenta — Calculadora de tamanho de impressão e resolução

Calculadora de proporção de imagem

Calcule a proporção entre largura e altura ou novas dimensões em pixels a partir de um lado definido.

Abrir ferramenta — Calculadora de proporção de imagem

Compressor de imagens

Tente ajustar um JPEG, PNG ou WebP ao tamanho de arquivo desejado, com resultado medido e opção de reduzir as dimensões.

Abrir ferramenta — Compressor de imagens

HEIC para JPG

Converta fotos HEIC compatíveis localmente em JPGs no tamanho original, ajuste a qualidade e o fundo e baixe os resultados verificados individualmente ou em ZIP.

Abrir ferramenta — HEIC para JPG

Conversor de imagens

Converta imagens PNG, JPEG e WebP localmente, ajuste transparência, fundo e qualidade e baixe os resultados.

Abrir ferramenta — Conversor de imagens

Criador de colagem de fotos

Organize fotos locais em uma grade e baixe em PNG ou JPEG.

Abrir ferramenta — Criador de colagem de fotos

Girar e espelhar imagens

Gire ou espelhe um lote local de imagens estáticas PNG, JPEG e WebP e confira e baixe os resultados processados.

Abrir ferramenta — Girar e espelhar imagens

Cortar imagem

Corte um JPEG, PNG ou WebP local com precisão em pixels e baixe o resultado em PNG ou JPEG.

Abrir ferramenta — Cortar imagem

Redimensionar imagem

Redimensione JPG, PNG ou WebP em pixels ou porcentagem, confira a prévia e baixe o resultado.

Abrir ferramenta — Redimensionar imagem

Ver todas as ferramentas desta categoria