Visão Geral

Botões são um dos elementos mais usados em qualquer site, e acertar a aparência deles — preenchimento, cores, cantos, sombra, estado hover — envolve muito CSS pequeno. Um gerador de botões deixa você estilizar um botão com controles visuais e vê-lo ao vivo, depois copia o CSS exato. Esta ferramenta cria estilos de botão prontos para usar no navegador, para você igualar um design sem escrever o CSS do zero.

Como usar (passo a passo)

1. 1

   Defina o estilo base

   Escolha cores de fundo e texto, preenchimento, raio de canto e fonte do botão.

2. 2

   Adicione um estado hover

   Defina como o botão muda ao passar o cursor — mudança de cor, sombra ou leve movimento.

3. 3

   Copie o CSS

   Cole o CSS de botão gerado (e o HTML se fornecido) no seu projeto.

Como Funciona

Você ajusta propriedades com controles — cor de fundo, de texto, preenchimento, raio de canto, borda, fonte e sombra — enquanto uma prévia mostra o botão. Muitos geradores também deixam definir um estado hover para o botão responder ao cursor. Quando estiver satisfeito, a ferramenta gera o CSS (e muitas vezes o HTML) para colar no seu projeto. Tudo roda localmente no navegador.

Quando usar

Estilizar um botão de chamada para ação combinando com sua marca. Prototipar variantes de botão (primário, secundário, fantasma) rápido. Obter o CSS de um estado hover ou ativo sem tentativa e erro. Aprender como preenchimento, raio e sombra se combinam na aparência de um botão. Criar um estilo de botão consistente para reutilizar num site. Igualar um botão de um mockup.

Perguntas Frequentes