1001Ferramentas
Ferramentas Categorias Guias FAQ
Sobre Contato Política de Privacidade Termos de Uso
🔘 Dev

Gerador de Botão CSS

Crie botões CSS customizados: cor, texto, padding, border-radius, sombra e hover. Veja o preview em tempo real e copie o HTML+CSS pronto para colar no projeto. Tudo no navegador.

Preview (passe o mouse para ver hover)

Botões CSS sem framework

Esta ferramenta gera CSS puro para um botão (sem Tailwind, sem Bootstrap), incluindo estado :hover com transição suave. O preview reflete em tempo real cada ajuste de cor, padding, sombra e raio.

Use os presets como ponto de partida e personalize a partir daí. Tudo no navegador.

Crie botões CSS personalizados

Poucos elementos aparecem tanto numa interface quanto o botão, e acertar a aparência dele (cor, espaçamento, cantos, sombra, efeito ao passar o mouse) muda o visual do site inteiro. Com este gerador você desenha o botão de forma visual e vê o resultado enquanto edita.

Ajuste a cor, o texto, o padding, o border-radius (os cantos arredondados), a sombra e o comportamento no hover, sempre com preview em tempo real. Satisfeito? Um clique copia o HTML e o CSS prontos para colar direto no projeto.

Tudo roda no navegador, sem nada para instalar. Serve tanto pra quem só quer um botão bonito logo quanto pra quem está aprendendo CSS e quer enxergar como cada propriedade altera a aparência.

Perguntas frequentes

Como faço um botão com gradiente? Não achei o controle.
Só pelo preset Gradiente. O modo gradiente não tem chave própria: ele liga ao clicar nesse preset e desliga assim que você clica em qualquer um dos outros quatro. Com ele ativo, a cor de fundo escolhida vira um linear-gradient de 135 graus entre ela mesma e uma versão 30% mais escura, e o hover refaz a conta partindo do escurecimento que você definiu. Todos os outros controles continuam funcionando normalmente por cima disso.
O que o controle de hover faz exatamente?
Ele escurece a cor de fundo em porcentagem, e é só isso que muda no estado hover quando a sombra está em zero. Nos 10% padrão, cada canal RGB é multiplicado por 0,9: o roxo #7c3aed vira rgb(112, 52, 213). Se a sombra estiver acima de zero, o hover ganha de brinde um translateY de -1px e uma sombra maior e mais espalhada, que é o efeito de botão subindo ao passar o mouse. Cor do texto e borda não mudam no hover.
O CSS copiado depende de Tailwind, Bootstrap ou algum reset?
Não depende de nada. Sai uma classe .btn-custom com background, color, padding, font-size, border-radius, border, cursor e uma transição de 0,2s, mais o bloco :hover, e junto vem a linha de HTML do botão com os caracteres especiais já escapados. O único ajuste comum depois é a fonte: o gerador não escreve font-family, e botão não herda a fonte da página por conta própria, então sem um reset ele sai com a fonte padrão do navegador.

Ferramentas Relacionadas

🌈

Gerador de Gradiente CSS

Crie gradientes lineares e radiais para CSS com prévia em tempo real. Ajuste cores, posições e ângulo. Copie o código CSS com um clique.
🎨

Gerador de Mesh Gradient

Crie mesh gradients modernos combinando vários radial-gradients. Adicione, remova e arraste pontos para compor fundos vibrantes ao estilo Stripe e Linear. Tudo no navegador.
🟢

Gerador de Neumorphism CSS

Crie efeitos Soft UI (neumorphism) com dois box-shadows complementares. Ajuste cor de base, distância, blur e tipo (extrudido, plano, pressionado). Cópia em CSS pronto. Tudo no navegador.
🪟

Gerador de Glassmorphism CSS

Crie efeitos de vidro fosco (glassmorphism) com backdrop-filter, transparência e bordas. Ajuste blur, saturação e opacidade. Veja o preview em tempo real e copie o CSS. Tudo no navegador.
🌑

Gerador de Sombra CSS

Crie sombras CSS (box-shadow) com prévia em tempo real. Configure múltiplas camadas de sombra, cor, desfoque, expansão e inset. Copie o código CSS.
🎯

Calculadora de Especificidade CSS

Calcule a especificidade (a, b, c) de um seletor CSS — IDs, classes/atributos/pseudo-classes, elementos. Útil para entender por que sua regra não está aplicando. Tudo no navegador.