Gerador de botão CSS
O Gerador de botão CSS permite ajustar a aparência de um botão em tempo real e copiar o código limpo para o seu projeto. Defina cores, espaçamentos, cantos arredondados e efeitos de foco com controles simples. Escolha entre gerar código em CSS tradicional ou classes utilitárias do Tailwind CSS.
Como fazer um botão em CSS passo a passo
Para configurar e exportar o estilo do seu botão, siga as etapas abaixo:
- Ajuste as cores utilizando os seletores de Cor de fundo e Cor do texto.
- Defina as dimensões internas nos controles de Espaçamento X e Espaçamento Y.
- Ajuste a curvatura dos cantos na barra Raio da borda.
- Escolha uma animação na opção Efeito ao passar o mouse.
- Clique em Copiar para a área de transferência para obter o código.
Exportação em Tailwind CSS e botão HTML CSS
No menu Mais opções, você pode alterar o Formato de saída entre CSS Vanilla e Tailwind CSS. No modo CSS tradicional, a ferramenta gera uma estrutura HTML com a tag <button> e a classe .custom-btn acompanhada do bloco de regras CSS.
Se selecionar o formato Tailwind CSS, os valores de espaçamento e raio são ajustados automaticamente para os degraus mais próximos da escala oficial do framework (como px-6 py-3 rounded-lg). As cores utilizam a sintaxe de valores arbitrários, como bg-[#2563eb], permitindo colar o código diretamente na sua marcação sem alterar arquivos de configuração.
Estilos de botão arredondado CSS e formato pílula
O formato dos cantos é determinado pela propriedade border-radius. Um valor zerado mantém o botão retangular com cantos retos. Valores intermediários, em torno de 8px, criam um botão arredondado CSS suave.
Quando o raio da borda atinge pelo menos metade da altura total do elemento (cerca de 24px com o espaçamento padrão), o formato se transforma em pílula. No Tailwind CSS, esse estilo corresponde à classe rounded-full.
Efeitos CSS no botão ao passar o mouse
No menu Efeito ao passar o mouse, é possível escolher animações interativas para quando o usuário posiciona o ponteiro sobre o elemento. As opções incluem Aumentar (escala do botão), Elevar (pequeno deslocamento vertical com sombra), Brilhar (criação de uma aura com a cor de fundo) e Contorno (um anel destacado ao redor da borda).
Em Mais opções, você pode definir a velocidade da transição como rápida (150ms), normal (300ms) ou lenta (500ms). Caso prefira um elemento estático, selecione a opção Nenhum.
Como criar botão HTML CSS com ícone para landing pages
Em páginas de vendas, botões de chamada para ação e atendimento via WhatsApp frequentemente utilizam ícones junto ao texto. Para incluir esse elemento visual, ative a opção Adicionar ícone temporário no painel de opções.
O gerador adiciona um ícone SVG de seta e aplica regras de CSS Flexbox com display: inline-flex, align-items: center e espaçamento de 8px (ou gap-2 no Tailwind). O SVG temporário pode ser substituído pelo ícone da sua preferência após colar o código no projeto.
Perguntas frequentes
Como fazer um botão em CSS?
Escolha as cores de fundo e texto, ajuste os espaçamentos internos e o raio da borda nos controles da ferramenta e clique no botão de copiar. O gerador fornece uma tag HTML de botão acompanhada do código CSS pronto para colar no seu projeto, sem dependências externas.
Como criar um botão com cantos arredondados em CSS?
Aumente o controle de raio da borda na ferramenta. No formato CSS tradicional, o valor é exportado como a propriedade border-radius em pixels. No formato Tailwind CSS, o valor é convertido automaticamente para a classe equivalente na escala do framework, como rounded-lg ou rounded-full.
Como adicionar efeito hover ao passar o mouse no botão?
Selecione a animação desejada no menu de efeito ao passar o mouse, escolhendo entre as opções aumentar, elevar, brilhar ou contorno. A ferramenta incluirá a pseudo-classe hover e a propriedade transition no código gerado para garantir um movimento suave.
Como gerar classes do Tailwind CSS para um botão?
Abra o painel de mais opções e altere o formato de saída para Tailwind CSS. A ferramenta converterá os espaçamentos e bordas para as classes utilitárias correspondentes da escala do Tailwind, utilizando valores arbitrários entre colchetes para as cores hexadecimais.
Como colocar um ícone alinhado ao texto no botão?
Ative a opção de adicionar ícone temporário no menu de mais opções. O código gerado incluirá um elemento SVG inline e as regras de alinhamento em Flexbox para manter o texto e o ícone centralizados com o espaçamento adequado.
O gerador de botão CSS é gratuito e roda no navegador?
Sim, a ferramenta é totalmente gratuita e funciona diretamente no navegador, sem necessidade de cadastro ou instalação. Todo o processamento e a pré-visualização ocorrem localmente no seu dispositivo.
Qual a diferença entre botão arredondado e botão pílula?
Um botão arredondado possui cantos levemente curvos, mantendo o formato retangular principal. O botão pílula tem as extremidades completamente circulares, o que ocorre quando o raio da borda é igual ou superior a metade da altura do botão.
