Gerador de botões CSS
Free online CSS button style generator. Real-time preview, one-click CSS/HTML/SCSS code generation. Supports text, size, border radius, gradient, shadow, border, Hover/Active states, animation presets and more.
What is the CSS Button Generator?
Gerador de botões CSS is a comprehensive free online tool that helps you quickly generate beautiful CSS button styles. No coding required — adjust parameters via the visual panel for real-time preview, and generate ready-to-use CSS/HTML/SCSS code with one click.
Core Features
- Text/Font Control — Customize button text, font, size, color, weight, italic, letter spacing, and line height
- Contexto — Background color + opacity control, supports linear/radial/conic gradients
- Size/Radius— Controles independentes de largura, altura e espaçamento nas quatro laterais; suporta raios de canto unificados ou separados
- Efeitos de sombra— Sombra de texto (X/Y/Desfoque/Cor) + Sombra de caixa (X/Y/Desfoque/Extensão/Cor/Recuo)
- Controle de Fronteiras— Bordas uniformes ou independentes nos quatro lados (largura/estilo/cor); suporta bordas com imagem e gradiente
- Estados de foco/ativo— Cor de fundo ao passar o mouse, escala, deslocamento no eixo Y, sobreposição de gradiente/sombra; deslocamento ao pressionar + escurecimento automático da cor
- Predefinições de animação— 8 animações CSS: Brilho Neon, Revelação por Deslizamento, Preenchimento Progressivo, Borda Serpenteante, Escala Pulsante, Efeito de Ondulação, Rotação 3D, Subida do Preenchimento
- Animação de transição— Função de duração e temporização ajustáveis
Esquemas predefinidos
Inclui 10 esquemas de cores selecionáveis com um clique: Azul Plano, Verde 3D em relevo, Roxo Gradiente, Verde Neon, Glassmorphism, Contorno Escuro, Arredondado tipo Comprimido, Vermelho Material, Laranja Retrô, Fantasma Minimalista. Alterne rapidamente entre diferentes estilos.
Saída do código
- CSS— Código completo do estilo do botão (.btn-custom + :hover + :active), com prefixos de fornecedores opcionais
- HTML— Código de exemplo para as tags <button> e <a>
- SCSS— Versão como mixin em SCSS para facilitar a reutilização em projetos
Suporte a ícones embutidos
Inclui 10 ícones SVG em linha da Lucide (Download, Seta para a direita, Pesquisar, Coração, Estrela, Configurações, Usuário, E-mail, Enviar, Carregar) com posição (esquerda/direita) e tamanho selecionáveis.