Gerador de Botão CSS com Pré-visualização ao Vivo
O gerador de botão CSS permite desenhar um botão personalizado de forma visual e copiar um CSS limpo, pronto para colar — sem ajustar propriedade por propriedade na mão. Modifique o fundo, o texto, o espaçamento, a borda, a sombra e o efeito de hover com controles simples e acompanhe a pré-visualização ao vivo se atualizando enquanto você trabalha.
Crie um botão sólido simples, um gradiente de duas cores, um estilo neon brilhante ou uma transição suave no hover e copie o código como regras CSS ou um trecho completo de HTML + CSS. Ele foi feito para desenvolvedores, designers e qualquer pessoa que queira um botão bonito sem escrevê-lo do zero.
Como Usar o Gerador de Botão CSS
Escolha uma predefinição inicial
Clique em qualquer uma das 12 predefinições prontas — Sólido, Contorno, Gradiente, Pílula, Pressionar 3D, Neon, Vidro, Minimalista, Sombra elevada, Sublinhado, Arredondado ou Forte. Cada uma já configura os estados normal e hover, então é só personalizar a partir dali.
Personalize o estado Normal
Com a aba Normal aberta, defina o Fundo (cor Sólida ou um Gradiente de duas cores com ângulo), a cor do Texto, o tamanho da fonte e o negrito, além do Espaçamento, da Borda e da Sombra.
Desenhe o estado Hover
Mude para a aba Hover e ajuste os mesmos controles para definir o que muda ao passar o mouse. Configure a Transição (duração e curva) uma vez na aba Normal e depois passe o mouse sobre o botão de pré-visualização para ver o efeito.
Pré-visualize e teste
A pré-visualização ao vivo se atualiza em tempo real. Use o seletor de Fundo para testar o botão sobre um fundo claro, escuro ou personalizado e digite seu próprio Texto do botão para ver o rótulo real.
Copie o código
Clique em Copiar CSS para obter apenas as regras .button e .button:hover, ou em Copiar HTML + CSS para um trecho completo com o elemento do botão e um bloco <style> incluído.
Recursos
Pré-visualização ao vivo com hover real
Passe o mouse sobre o botão de pré-visualização para ativar o estado de hover e a transição CSS que você configurou — sem precisar colar em outro lugar para testar.
Controles Normal e Hover
Desenhe cada estado de forma independente com abas Normal e Hover separadas, controlando exatamente o que muda quando o usuário passa o mouse.
Fundos sólidos e em gradiente
Use uma única cor sólida ou um gradiente linear de duas cores com uma cor de início/fim e um ângulo ajustável de 0 a 360 graus.
Estilização do texto
Defina a cor do texto, o tamanho da fonte de 10 a 32 px e ative ou desative o negrito no rótulo do botão.
Controles de espaçamento e borda
Ajuste o espaçamento vertical e horizontal, além da largura, da cor e do raio dos cantos da borda até uma forma completa de pílula.
Sombra com opacidade
Controle o deslocamento X/Y, o desfoque, a cor e a opacidade da sombra para dar profundidade, elevação ou um brilho suave ao botão.
Duração e curva da transição
Defina a duração da transição de hover e escolha uma curva de easing — ease, ease-in, ease-out, ease-in-out ou linear.
12 predefinições prontas
Comece rápido com os estilos Sólido, Contorno, Gradiente, Pílula, Pressionar 3D, Neon, Vidro, Minimalista, Sombra elevada, Sublinhado, Arredondado e Forte.
Seletor de fundo da pré-visualização
Verifique como o botão se comporta sobre um fundo claro, escuro ou de qualquer cor personalizada antes de colocá-lo no ar.
Texto do botão editável
Digite seu próprio rótulo para que a pré-visualização reflita o texto real que você pretende usar, e não um texto de exemplo.
Duas opções de cópia
Copie apenas as regras CSS ou pegue um trecho completo de HTML + CSS com o elemento do botão pronto para inserir em qualquer página.
Código limpo e independente de framework
A saída usa propriedades CSS padrão, então a mesma classe .button funciona em HTML puro, React, Vue, WordPress e muito mais.
Perguntas Frequentes
Como criar um botão em CSS?
Escolha uma predefinição ou comece do zero e ajuste os controles de fundo, texto, espaçamento, borda e sombra. A pré-visualização ao vivo mostra o resultado, e clicar em Copiar CSS entrega a regra .button finalizada para colar na sua folha de estilos.
Como adicionar um efeito de hover a um botão CSS?
Mude para a aba Hover e altere qualquer controle — cor, sombra, borda e assim por diante — para definir como o botão fica ao passar o mouse. Configure a duração e a curva da transição na aba Normal e depois passe o mouse sobre o botão de pré-visualização para testar. O estado de hover é exportado como uma regra .button:hover.
Como fazer um botão com gradiente?
Na seção Fundo, clique na opção Gradiente. Escolha as cores De e Até e defina o ângulo de 0 a 360 graus. A pré-visualização e o código linear-gradient gerado se atualizam na hora.
Como arredondar os cantos de um botão CSS?
Use o controle Raio na seção Borda. Aumente-o para cantos mais suaves ou leve-o até 50 px para uma forma de pílula totalmente arredondada. As predefinições Pílula e Arredondado já oferecem estilos arredondados prontos para começar.
Dá para copiar o código do botão gerado?
Sim. O Copiar CSS copia as regras .button e .button:hover, enquanto o Copiar HTML + CSS copia um trecho completo com o elemento do botão envolto em um bloco <style>, pronto para colar em qualquer página HTML.
Posso personalizar os estados normal e hover separadamente?
Com certeza. As abas Normal e Hover têm, cada uma, seus próprios controles de fundo, texto, espaçamento, borda e sombra, então você define exatamente o que muda no hover. As configurações de transição são compartilhadas e definidas uma única vez na aba Normal.
Posso usar o código do botão em qualquer projeto?
Sim. O CSS gerado é um código limpo e independente de framework, que usa propriedades padrão como background, border-radius, box-shadow e transition. Aplique a classe .button ao seu elemento em HTML, React, Vue, Angular, WordPress ou qualquer projeto web.
Ainda não há comentários. Seja o primeiro a comentar!