Softonic

Gerador de botões CSS

Etapa 1 / 4 Texto do botão

Texto do botão

Digite um rótulo em texto simples. O trecho gerado neutraliza qualquer conteúdo parecido com HTML.

Crie um botão e confira os estados padrão, ao passar o mouse, foco do teclado, pressionado, desativado e carregamento. Configure fundo sólido ou em degradê, borda, espaçamento, cantos, sombra e cores de estado. O rótulo é neutralizado, o design fica no navegador e o resultado traz HTML semântico e CSS com valores limitados.

Como gerar um botão CSS

  1. 1

    Escreva o rótulo

    Digite texto simples; caracteres parecidos com HTML continuam sendo texto.

  2. 2

    Defina o design básico

    Escolha preenchimento, cores, tamanho, espaçamento, raio, borda e sombra.

  3. 3

    Configure os estados

    Ajuste ponteiro, pressão e foco; desativado e carregamento já são incluídos.

  4. 4

    Confira as orientações

    Verifique contraste do texto e do foco e a área mínima.

  5. 5

    Copie ou baixe

    Copie HTML e CSS ou baixe uma página HTML UTF-8 independente.

Estados incluídos

O HTML usa um <button type="button"> real. O CSS cobre padrão, passagem do mouse, foco com :focus-visible, pressionado, propriedade disabled e carregamento com aria-busy="true". Seu aplicativo decide quando os estados se aplicam e qual ação executar.

Contraste e tamanho

O cálculo considera o menor contraste entre texto e fundos básico, final do degradê, ponteiro e pressão. As metas são 4,5:1 para texto normal e 3:1 para o contorno de foco na superfície clara. Confira novamente na página real.

O CSS impõe pelo menos 44 por 44 px. Os movimentos somem quando a pessoa prefere menos animação; o indicador de carregamento fica mais lento.

Limites seguros e privacidade

O rótulo é normalizado, limitado a 120 grafemas e neutralizado para HTML. As cores devem ter seis dígitos hexadecimais e os números são limitados. O editor completo usa a memória do navegador; o fluxo de quatro etapas usa sessionStorage na aba. Nada vai para a URL ou para os nossos servidores.

<button type="button" class="generated-button" aria-busy="true" disabled>
  <span class="generated-button__label">Salvando</span>
</button>

Remova os dois atributos ao concluir e anuncie resultados importantes em uma região de status adequada.

Perguntas frequentes

Não. Ele oferece verificações úteis, mas a conformidade depende da página final e dos testes.

Não. Rótulo e design ficam no navegador; o fluxo usa somente o armazenamento de sessão da mesma aba.

Botões servem para ações. Para navegar, use um link com href real e adapte a classe visual.

O resultado é selecionado para cópia manual e o sucesso só aparece após a operação real.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de EditorConfig

Monte um .editorconfig com as suas regras de indentação, fim de linha e charset e acrescente a seção correta para cada linguagem do seu repositório: Python, Go, YAML, Makefile e mais.

Validador de Email

Valide um endereço de email: verificação de sintaxe RFC 5322, consulta de registro MX em tempo real, além de detalhes de parte local, domínio e comprimento. Nenhum email é enviado.

Ferramenta disponível em outros idiomas