a11y.skipToMainContent
1

Gerador de Botão CSS

Desenhe botões CSS de boa aparência visualmente — preenchimento, borda, raio, sombra e hover — em seguida, copie o CSS.

px
px
px
Fill
Color
Border
px
px
Box shadow

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Button Generator

  1. Defina o texto do botão, enchimento, tamanho e peso da fonte e cor do texto.
  2. Escolha um preenchimento de gradiente sólido ou bi-stop, e alternar a borda e sombra conforme necessário.
  3. Escolha uma borda-rádio e um efeito hover (lift, escurecer, ou brilhar) e assista à visualização ao vivo.
  4. Clique em Copiar CSS para copiar as regras .btn e .btn:hover em sua planilha de estilo.

O que é {nome}?

Este gerador constrói uma regra CSS completa para um botão de controles visuais. Ajuste o texto, preenchimento, tamanho e peso da fonte, cor do texto, um preenchimento de gradiente sólido ou bi-stop, uma borda opcional, o border-radius, uma sombra de gota opcional e um efeito hover, e as atualizações de visualização ao vivo em cada mudança – incluindo um estado de hover de trabalho aplicado ao botão preview.

A saída é um bloco pronto para colar .btn { ... } junto com um bloco correspondente .btn:hover { ... } block, para que você possa soltar ambos em sua folha de estilo e aplicar a classe btn a qualquer elemento. Tudo é calculado no seu navegador; nada é carregado.

Advertisement

FAQ

A antevisão mostra o efeito de hover real?
Sim. A regra de hover gerada é injetada como um estilo de escopo que visa apenas o botão de visualização, então pairar sobre ele mostra exatamente o que o bloco .btn:hover copiado fará.
Posso fazer um botão de gradiente?
Assinale o gradiente para alternar o preenchimento de uma única cor para um gradiente linear de duas paradas. Você pode escolher as duas cores e definir o ângulo de gradiente, e os efeitos de hover funcionam com gradientes também.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Button Generator on Wikipedia·Developer Tools on Wikipedia·CSS Button Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement