🔘 Dev

Gerador de Botão CSS

Crie botões CSS customizados: cor, texto, padding, border-radius, sombra e hover. Veja o preview em tempo real e copie o HTML+CSS pronto para colar no projeto. Tudo no navegador.

Preview (passe o mouse para ver hover)

Texto

Cor de fundo Cor do texto Padding X (px) 24px Padding Y (px) 12px Border-radius (px) 8px Tamanho fonte (px) 14px Espessura borda (px) 0px Cor borda Sombra (intensidade) 0px Hover (escurece %) 10%

CSS + HTML

Botões CSS sem framework

Esta ferramenta gera CSS puro para um botão (sem Tailwind, sem Bootstrap), incluindo estado :hover com transição suave. O preview reflete em tempo real cada ajuste de cor, padding, sombra e raio.

Use os presets como ponto de partida e personalize a partir daí. Tudo no navegador.

Ferramentas Relacionadas

🔍

Decodificador Pix

Decodifica BR Code Pix (texto começando com 0002...) extraindo chave, valor, beneficiário, cidade e identificador.

🔍

Buscador de Ícones

Busca ícones SVG da biblioteca Lucide (1300+ ícones) por nome. Copia o SVG ou o nome do componente.

🔐

Formatador .env

Formata arquivos .env: alfabetiza variáveis, agrupa por prefixo, escapa valores com aspas e remove duplicatas.