Gerador de botões CSS
Gerador online gratuito de estilos de botões em CSS. Visualização em tempo real, geração de código CSS/HTML/SCSS com um clique. Suporta texto, tamanho, raio da borda, gradiente, sombra, borda, estados de foco/ativo, predefinições de animação e muito mais.
O que é o Gerador de Botões CSS?
Gerador de botões CSSé uma ferramenta online gratuita e completa que ajuda você a criar rapidamente estilos bonitos para botões em CSS. Não é necessário saber programar — ajuste os parâmetros pelo painel visual para ter uma pré-visualização em tempo real e gere código CSS/HTML/SCSS pronto para uso com um clique.
Principais recursos
- Controle de texto/fonte— Personalize o texto, a fonte, o tamanho, a cor, a espessura, o itálico, o espaçamento entre letras e a altura da linha dos botões
- Contexto— Controle da cor de fundo e da opacidade; compatível com gradientes lineares, radiais e cônicos
- Tamanho/Raio— 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 passagem do mouse/ativos— 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 de néon, 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— function de duração e temporização ajustáveis
Esquemas predefinidos
Inclui 36 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.