Botões · Impulsamos

Botão da marca

.botao4

Modelo shiny button: pílula Inter 600 com seta depois do rótulo e um contorno de luz (degradê cônico) que gira devagar pela borda, em 3 segundos. É a ação principal do grupo. Quatro estilos:

Escuro (padrão)

.botao

Tinta com texto branco. A ação principal de uma tela ou de um grupo.

Claro

.botao.claro

Branco com anel fino, sem trama, brilho nem halo por dentro. Ação principal sobre fundo colorido; o "Entrar com Google".

Contorno

.botao.contorno

Miolo da cor do fundo onde está e anel Tinta 32%. Ação que precisa de destaque sem pesar.

Destaque

.botao.destaque

Ardósia. O botão principal de uma seção escura ou de chamada.

O miolo do contorno segue o fundo

O .botao.contorno pinta o miolo com a cor do lugar onde está: Tela por padrão e dentro de .bloco; branco dentro de .cartao, .popover e .janela; Névoa dentro de .bloco.nevoa e da barra superior. Em outro fundo, o miolo aparece como uma mancha.

Tamanhos

5

A altura muda com o lugar: 44 é o padrão; 36 em cabeçalho de cartão e janela; 32 em linha de tabela; 52 em capa; cheio em cartão de entrar e formulário estreito.

Do menor ao maior

.pequeno · .compacto · (padrão) · .grande

O tamanho combina com qualquer estilo.

Tamanho + estilo

.botao.claro.pequeno

As classes se somam.

Cheio

.botao.cheio

Largura toda do contêiner, 48px de altura.

Seta e ícone

4

Todo .botao nasce com a seta → depois do rótulo (desenhada pelo CSS, não vai no HTML). Três classes trocam ou tiram a seta.

Baixar e enviar

.baixa · .sobe

Trocam a seta pelo ícone de baixar ou de subir. No hover o ícone desce ou sobe 2px.

Sem seta, com ícone

.sem-seta

Tira a seta. O ícone entra dentro do <span>, antes do texto (18px).

Entrar com Google

.botao.claro.cheio.sem-seta

O único login do time. O G vai num disco branco (.g-disco, 24px, em base.css: vale em qualquer botão desde 28/10/2026). Só contas @impulsamos.es.

Login do time: só contas @impulsamos.es.

Estados

5

Lado a lado, parados para você comparar. Os botões das seções acima estão ao vivo: passe o mouse para ver o movimento de verdade.

Botão da marca, do repouso ao desabilitado

:hover · :focus-visible · :active · :disabled

Foco pelo teclado = o visual do hover + o anel --sombra-foco (28/10/2026).

Repouso

Hover

Foco (teclado)

Ativo (clique)

Desabilitado

Luz girandoUm degradê cônico corre pela borda de 1px o tempo todo (3s por volta). No hover a faixa de luz se abre de 5% para 22%, clareia (Aço → Bruma, ponto branco) e ganha um segundo giro mais rápido no sentido contrário.
FundoO escuro troca Tinta por Ardósia em 0,6s (cubic-bezier(.25,1,.5,1)).
Halo e brilhoUm halo Bruma Profunda respira por dentro (escala 1 → 1,2 em 4,5s) e um brilho circula atrás do rótulo. A trama de pontos acompanha a luz.
SetaA seta avança 3px (baixar desce 2px, subir sobe 2px) em 0,4s.
Clique e desabilitadoNo clique o botão desce 1px e encolhe para 98%. Desabilitado: disabled no HTML, opacidade 45%, cursor proibido, giro parado.

Hover em cada estilo

.claro · .contorno · .destaque

Corrigido no DS em 28/10/2026: o fundo troca em todos os estilos e temas. Claro → Bruma; contorno → Ardósia com texto branco; destaque → Tinta. Cada estilo só define as variáveis (--b-fundo, --b-fundo-hover…); o hover troca --b-cor e --b-luz-agora, que nenhum estilo define.

Claro

Claro hover

Contorno

Contorno hover

Destaque

Destaque hover

Escuro hover

Contorno hover

Sobre fundo escuro

2

Dentro de .cartao.destaque ou .bloco.escuro (Ardósia) os botões se viram sozinhos, sem classe nova: o escuro vira branco com texto Ardósia, o contorno vira anel branco, fantasma e translúcido viram branco 12%.

No cartão de destaque

.cartao.destaque .botao

O cartão mais importante da seção.

No bloco escuro

.bloco.escuro .botao

A chamada dentro de um cartão branco.

O <span> é obrigatório

O rótulo do .botao vai sempre dentro de um <span>. Não é enfeite: o efeito depende dele.

Com e sem o span

<button class="botao"><span>…</span></button>

O botão já tem ::before (trama) e ::after (brilho). Faltam camadas: o halo é o span::before e a seta é o span::after. O span também alinha o ícone ao texto (gap 8px).

Com span: seta e halo

Sem span: sem seta, sem halo

Faça

Escreva <button class="botao"><span>Salvar</span></button>, um span só, filho direto.
Ponha o ícone dentro do span, antes do texto, com .sem-seta.

Não faça

Texto solto no <button>: o botão perde a seta e o halo.
Ícone fora do span, ou dois spans: o alinhamento quebra.

Secundários

.fantasma · .translucido2

Sem efeito, só troca de fundo. Sem luz, sem giro, sem ícone que anda (a luz na borda deles foi reprovada em 27/10/2026). Hover em 0,15s; clique encolhe para 97%.

Fantasma

.fantasma

Branco com contorno fino. Todas as ações do grupo menos a principal: Cancelar, Ver detalhes, Copiar. 36px; .grande 44px.

Perigo

.fantasma.perigo

Ação que apaga ou remove. Texto vermelho semântico; hover no fundo de erro. Sempre pede confirmação numa .janela.

Translúcido

.translucido

Branco 60% com borda embutida. Controle sobre Névoa, degradê ou foto: barra superior, cartão de destaque. 44px; .compacto 36px.

Estados dos secundários

:hover · :active · :disabled

Fantasma: hover Bruma Clara + borda Bruma Profunda. Translúcido: branco 85%. Foco pelo teclado: os dois ganham o anel --sombra-foco.

Repouso

Hover

Foco

Perigo hover

Translúcido hover

Translúcido foco

Desabilitado

Faça

Secundário só troca de fundo no hover.
Ação secundária que precisa de destaque usa .botao.claro ou .botao.contorno.

Não faça

Luz girando, ícone que anda ou texto rolando em fantasma ou translúcido.
Inventar um efeito novo para um caso só.

Baixar em duas cores

details.baixar

Um botão Baixar abre Em preto (tinta) e Em branco. Para arquivos de marca (logotipo, símbolo, variações).

Baixar

O menu abre para cima, em vidro, 190px. Cada opção tem a bolinha da cor, o nome e o código. Fecha ao clicar fora ou com Esc (comum.js). Os dois arquivos existem lado a lado: nome.svg e nome-branco.svg.

Só ícone

.icone · .redondo2

Sem texto, então sempre com aria-label, que diz a ação.

Ícone discreto

.icone

Quadrado de 32px, raio 12, ícone Tinta 46%. Ações de linha de tabela (⋯), fechar, navegar o calendário. Hover: fundo 4% e ícone Tinta.

Redondo

.redondo

Círculo translúcido de 44px da barra superior (sino, tema, gaveta). O .ponto de 7px marca não lido (Ardósia; Lima no escuro).

Estados

:hover

O .icone e o .redondo recebem o anel de foco do teclado (o do redondo soma a borda embutida).

Repouso

Hover

Foco

Redondo

Redondo hover

Redondo foco

Grupos de ações

1 regra

Um .botao por grupo de ações. As outras são fantasma (ou translúcido sobre Névoa). A ação principal fica à direita; Cancelar vem antes.

Rodapé de formulário

Faça

Cancelar fantasma, Salvar botão.

Cabeçalho de cartão

Faça

Ações no .acoes do .cartao-cabeca; o botão em .compacto.

Processos

Dois botões da marca

Não faça

Dois efeitos competem e ninguém sabe qual é a ação principal.

Perigo no botão da marca

Não faça

Apagar não é a ação convidativa da tela: vai no .fantasma.perigo, com confirmação.

Ação de perigo com confirmação

.fantasma.perigo + dialog.janela

Clique em Excluir: abre a <dialog class="janela"> com showModal(). Na janela, Cancelar antes e a ação à direita, as duas em fantasma; o texto diz que nada se perde (vai para a lixeira). Nunca confirm().

Alternadores e chips

.alternar · .chip2

Botões de escolha, não de ação: trocam a vista ou filtram a lista. Sem efeito; o escolhido muda de fundo. O DS não traz JS para eles: a tela troca a classe .ativo.

Alternar

.alternar

Dois botões num trilho Névoa (Grade | Lista). O ativo é branco com sombra; o outro, Tinta 66%. Botões de 28px, ícone 14. Foco pelo teclado: anel --sombra-foco, também no ativo (somado à sombra).

Chip de filtro

.chip · .chip.ativo

Fundo Névoa, 32px, um tamanho só. Ativo = Tinta com texto branco (Lima no escuro). .n = contagem; .fechar = remove o filtro.

Estados do chip

:hover · .ativo

Hover: Bruma Clara. Foco do teclado: anel Bruma Profunda. Dentro de .cartao.destaque: branco 12%, ativo branco com texto Ardósia.

Repouso

Hover

Foco

Ativo

No destaque

Especificação

Medidas e tokens exatos do base.css. Clique num token para copiar.

Classe	Altura	Respiro lateral	Fonte	Ícone	Uso
`.botao.pequeno`	32px	14px	Inter 600 12px	18 (gap 6)	Linha de tabela, lista densa
`.botao.compacto`	36px	16px	Inter 600 12,5px	18	Cabeçalho de cartão, janela
`.botao`	44px	22px	Inter 600 13px	18	Padrão
`.botao.grande`	52px	28px	Inter 600 14,5px	18	Capa, chamada
`.botao.cheio`	48px	largura 100%	Inter 600 13px	18	Entrar, formulário estreito
`.fantasma`	36px	16px	Inter 500 12,5px	15 (gap 6)	Ações secundárias
`.fantasma.grande`	44px	18px	Inter 500 13px	15	Ao lado de um .botao padrão
`.translucido`	44px	18px	Inter 500 12,5px	16 (gap 8)	Barra superior, sobre Névoa
`.translucido.compacto`	36px	16px	Inter 500 12,5px	16	Cartão de destaque
`.icone`	32 × 32	—	—	17, Tinta 46%	Ação de linha, fechar
`.redondo`	44 × 44	círculo	—	18, Tinta 66%	Barra superior
`.chip`	32px	14px	Inter 500 12,5px	14 (gap 8)	Filtro
`.alternar button`	28px (trilho 34)	12px	Inter 500 12,5px	14 (gap 6)	Grade \| Lista

As cores do .botao são propriedades CSS próprias (--b-*). Cada estilo só troca os valores. Tema claro:

Propriedade	Escuro	.claro	.contorno	.destaque	Sobre Ardósia
`--b-fundo`	`--tinta`	`#fff`	`--tela` (contexto)	`--ardosia`	`#fff`
`--b-fundo-hover`	`--ardosia`	`--bruma`	`--ardosia`	`--tinta`	`--bruma`
`--b-texto` / hover	`#fff` / `#fff`	`--tinta-fixa` / igual	`--tinta` / `#fff`	`#fff` / `#fff`	`--ardosia` / `--tinta-fixa`
`--b-anel`	branco 8%	`--linha-forte` → Ardósia 25%	`--tinta-32` → transparente	branco 12%	transparente
`--b-luz` → hover	`--aco` → `--bruma`	`--aco` → `--ardosia`	`--aco` → `--bruma`	`--bruma-profunda` → `--bruma`	`--bruma-profunda` → `#fff`
`--b-brilho-hover`	`#fff`	`--tinta`	`#fff`	`#fff`	`--bruma`
`--b-halo`	`--bruma-profunda`	(sem halo)	`--bruma-profunda`	`--aco`	`--bruma`
`--b-pontos`	`#fff`	(sem trama)	`--ardosia`	`#fff`	`--ardosia`

Movimento	Valor	Onde
Giro da luz	`--b-duracao: 3s` linear, infinito	Borda, trama e brilho do .botao
Giro extra no hover	7,5s linear, ao contrário, somado (`animation-composition: add`)	.botao em hover/foco
Troca de cor do .botao	`.6s cubic-bezier(.25, 1, .5, 1)`	Fundo, faixa, luz, texto
Halo que respira	4,5s linear, escala 1 → 1,2	`.botao > span::before`
Seta	`.4s var(--ease-out)`, 3px	`.botao > span::after`
Hover dos secundários	`.15s var(--ease)`	.fantasma, .translucido, .redondo, .chip, .alternar
Clique	.botao: `translateY(1px) scale(.98)` · secundários: `scale(.97)`	:active
Movimento reduzido	Sem giro nem halo	`prefers-reduced-motion: reduce`

Acessibilidade

Use sempre <button> (ou <a> se leva a outra página). Botão só de ícone leva aria-label. Área de toque: 44px é o padrão; .pequeno, .icone e .chip (32px) ficam em computador, longe de outros alvos. Foco: todos mostram o anel --sombra-foco — fantasma, ícone, chip, alternar (inclusive o ativo), .translucido, .redondo e o .botao (visual do hover + anel).

Modo escuro

Ligue no botão de tema da lateral para ver esta página no escuro. O que muda nos botões ([data-tema="escuro"] no base.css):

Botão	No escuro
`.botao`	Fundo Bruma com texto Tinta; hover branco com a luz da borda em Lima
`.botao.claro`	Continua branco; anel some; luz do hover Lima
`.botao.contorno`	Miolo da cor do fundo escuro, anel claro, trama Bruma; luz do hover Lima
`.botao.destaque`	Continua Ardósia; hover Ardósia + 28% Aço; luz Lima
`.fantasma`	Fundo `--branco` escuro (#1A2C3A); hover `--bruma-clara` escuro (#1F3546) com borda Tela 20%
`.translucido` · `.redondo`	Tela 6%; hover Tela 12%. O `.ponto` ganha anel da cor da casca
`.chip.ativo`	Lima com texto Tinta
Anel de foco	`--sombra-foco` vira Lima 50%, 3px