Devs & IA

Ferramenta

Botões CSS prontos para copiar

214 referências de botões para adaptar. Os exemplos identificados com JavaScript permitem testar seleção, alternância e expansão. Os demais demonstram aparência e estados visuais em HTML e CSS. Agendamentos, pagamentos, envio de mensagens e outras ações de negócio precisam da integração do seu projeto.

Sólido Primário

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Contorno Secundário

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Fantasma Terciário

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Perigo (ação destrutiva)

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Carregando (spinner)

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Sucesso com marca

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Ícone circular (só ícone)

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Seta que avança

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Sublinhado editorial

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pílula com contador

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Elevação sutil

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Preenchimento lateral

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Bloco largo (mobile)

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Duplo (grupo de ações)

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Alternador (toggle)

Originais

por Redação Devs & IA · interação em JavaScript

Ative e desative uma preferência. O mesmo atributo controla a aparência e o estado anunciado ao leitor de tela.

A preferência é local à demonstração. Conecte o estado ao layout e à persistência do seu aplicativo.

Escuro invertido

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Compacto de tabela

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Traço animado

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Card clicável

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Copiar com retorno

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Link externo

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Gradiente contido

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Etiqueta de filtro

Originais

por Redação Devs & IA · interação em JavaScript

Ligue ou desligue um filtro sem remover o controle da navegação por teclado.

Conecte aria-pressed ao filtro da sua lista. O exemplo não consulta dados.

Voltar discreto

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Grupo segmentado

Originais

por Redação Devs & IA · interação em JavaScript

Escolha um único período por clique, Tab e Enter ou setas. Apenas uma opção permanece selecionada.

A seleção não filtra relatórios sozinha. Use o período selecionado na consulta do seu aplicativo.

Dividido com menu

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Enviar arquivo

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Paginação

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Curtir com contador

Originais

por Redação Devs & IA · interação em JavaScript

Alterne uma curtida e seu contador sem acumular cliques repetidos. Enter e Espaço funcionam como o clique.

Contador demonstrativo, reiniciado ao recarregar. Curtidas reais precisam de identidade, servidor e proteção contra repetição.

Alternar tema

Originais

por Redação Devs & IA · interação em JavaScript

Alterne o tema do exemplo. O switch usa aria-checked para comunicar ligado e desligado.

Defina as cores do restante da sua interface e a estratégia de persistência antes de integrar.

Compartilhar

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Expandir e recolher

Originais

por Redação Devs & IA · interação em JavaScript

Abra e recolha o painel de detalhes. O conteúdo fica oculto também para leitores de tela quando recolhido.

Se repetir o componente, use um id diferente para cada painel e atualize aria-controls.

Gravar áudio

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Ação de tabela

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Passo a passo

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Chamada com custo

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Filtro com contagem

Originais

por Redação Devs & IA · interação em JavaScript

Selecione um filtro mantendo o total visível. O estado não depende apenas da cor.

O total é ilustrativo. Calcule-o a partir dos seus dados e conecte a seleção à lista de resultados.

Flutuante de ação

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Entrar com provedor

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Barra de progresso em botão

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Aviso destrutivo com confirmação

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Etiqueta removível

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Copiar com retorno de estado

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Voltar ao topo

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Fintech — Secure Pay

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

IA — Neural Processing

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Engenharia — Blueprint Calculator

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Arquitetura — 3D Elevation

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

DevTools — Terminal Sync

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

B2B Corporativo — Report Generation

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

E-commerce — Fast Checkout

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Saúde — Health Pulse

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Linear Shimmer Beam

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Glassmorphic Glow Pill

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Tactile Dark 3D

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Cyber-Industrial Mono

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Enviar com progresso

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Curtir com contador

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Glass primário

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Glass contorno

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Brutalista sólido

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Brutalista sticker

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Tátil push 3D

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Tátil pílula squish

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Gradiente Solar Shimmer

Gradiente

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Cyber Neon Glow

Neon

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Tátil 3D Pressionável

3D

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Ícone Expansível Minimalista

Ícones

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pulso Neural Animado

Animação

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Retrô Pixel Command

Retrô

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Borda Aurora Gradiente

Gradiente

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

E-Commerce Checkout Rápido

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Chamada Principal — Seta Deslizante

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Link Editorial — Sublinhado Progressivo

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Vidro Fosco — CTA Translúcido

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Contorno com Preenchimento Deslizante

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Borda em Gradiente Animada

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Botão Tátil — Pressão Suave

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Circular Flutuante — Ação Rápida

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Dividido — Ação Principal e Menu

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Terminal — Prompt Piscante

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Contorno Pontilhado — Adicionar

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pill Duotone — Alternância de Ênfase

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Gastronomia — Pedido ao Chef

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Gastronomia — Reserva Mesa VIP

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Gastronomia — Chamar Garçom

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Gastronomia — Calculando Conta

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Gastronomia — Menu Degustação

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Confeitaria — Encomenda de Bolos

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Confeitaria — Adicionar ao Carrinho

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Confeitaria — Orçamento de Festa

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Confeitaria — Entrega de Doces

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Confeitaria — Personalizar Recheio

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Concessionária — Agendar Test Drive

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Concessionária — Simular Financiamento

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Concessionária — Avaliar Meu Usado

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Concessionária — Ficha Técnica

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Concessionária — Reservar Veículo

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Mecânica — Orçamento de Peças

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Mecânica — Agendar Revisão

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Mecânica — Scanner de Injeção

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Mecânica — Guincho 24h

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Mecânica — Aprovar Orçamento

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Advocacia — Consulta Jurídica

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Advocacia — Andamento do Processo

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Advocacia — Parecer Jurídico

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Advocacia — Falar com Advogado

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Advocacia — Enviar Documentos

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Contabilidade — Balancete Contábil

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Contabilidade — Impostos DAS/DARF

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Contabilidade — Emitir NF-e

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Contabilidade — Migrar Empresa

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Contabilidade — Relatório IRPF

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Odontologia — Avaliação Dental

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Odontologia — Validar Convênio

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Odontologia — Marcar Consulta

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Odontologia — Ver Exames

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Odontologia — Telemedicina 24h

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Barbearia — Reservar Horário

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Barbearia — Escolher Barbeiro

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Barbearia — Combo Cabelo + Barba

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Barbearia — Comprar Produtos

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Barbearia — Assinar Clube VIP

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pet Shop — Banho e Tosa

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pet Shop — Emergência Vet 24h

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pet Shop — Comprar Ração

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pet Shop — Agendar Vacina

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pet Shop — Reservar Hotelzinho

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Fitness — Passe Grátis 7 Dias

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Fitness — Gerando Treino

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Fitness — Matricular na Academia

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Fitness — Avaliação Física

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Fitness — Contratar Personal

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Supermercados — Entrega Expressa 30 min

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Tatuadores — Orçamento Flash Tattoo

Por profissão

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Instagram — Sólido gradiente

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Instagram — Contorno gradiente

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Instagram — Ícone expande

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Instagram — Vidro (glass)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Instagram — Redondo (só ícone)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

X — Sólido preto

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

X — Contorno

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

X — Ícone expande

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

X — Neubrutalist

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

X — Redondo (só ícone)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

TikTok — Sólido glitch

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

TikTok — Contorno ciano

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

TikTok — Ícone expande

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

TikTok — Gradiente marca

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

TikTok — Redondo (só ícone)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Facebook — Sólido

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Facebook — Contorno

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Facebook — Ícone expande

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Facebook — Suave (soft)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Facebook — Redondo (só ícone)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

LinkedIn — Sólido

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

LinkedIn — Contorno (pílula)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

LinkedIn — Ícone expande

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

LinkedIn — Suave (soft)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

LinkedIn — Redondo (só ícone)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

WhatsApp — Sólido

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

WhatsApp — Contorno

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

WhatsApp — Ícone expande

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

WhatsApp — Bolha de chat

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

WhatsApp — Redondo (só ícone)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Telegram — Sólido

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Telegram — Contorno

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Telegram — Ícone expande

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Telegram — Gradiente

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Telegram — Redondo (só ícone)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

YouTube — Sólido

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

YouTube — Contorno

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

YouTube — Ícone expande

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

YouTube — Suave (soft)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

YouTube — Redondo (só ícone)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Spotify — Sólido (pílula)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Spotify — Contorno (pílula)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Spotify — Ícone expande

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Spotify — Escuro

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Spotify — Redondo (só ícone)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Twitch — Sólido

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Twitch — Contorno

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Twitch — Ícone expande

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Twitch — Ao vivo (pulse)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Twitch — Redondo (só ícone)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Discord — Sólido

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Discord — Contorno

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Discord — Ícone expande

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Discord — Suave (soft)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Discord — Redondo (só ícone)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pinterest — Sólido (pílula)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pinterest — Contorno (pílula)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pinterest — Ícone expande

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pinterest — Suave (soft)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pinterest — Redondo (só ícone)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Kwai — Sólido

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Kwai — Contorno

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Kwai — Ícone expande

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Kwai — Gradiente

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Kwai — Redondo (só ícone)

Plataformas

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Neubrutalism — Sólido

Neubrutalism

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Neubrutalism — Contorno

Neubrutalism

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pushable 3D — Físico

3D

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Pushable 3D — Índigo

3D

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Minimalista — Sublinhado que cresce

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Minimalista — Sombra suave

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Retrô — Pixel

Retrô

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Retrô — Relevo 90s

Retrô

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Minimalista — Borda em gradiente

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Neomórfico — Suave

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Ação principal — Confirmar

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Ação secundária — Cancelar

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Estado de envio

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Ação destrutiva — Excluir

Originais

por Redação Devs & IA · exemplo visual em HTML/CSS

Exemplo visual. Conecte a ação e os dados no seu projeto.

Antes de copiar: o que separa um botão bonito de um botão bom

Um botão é o elemento com maior densidade de decisão de toda a interface. Ele precisa parecer clicável, comunicar a consequência do clique, funcionar no teclado, responder ao toque em tela pequena e continuar legível para quem enxerga pouco. A parte visual — que é o que você vê na grade acima — é só a camada de cima.

Por isso vale usar esta galeria como ela realmente serve: ponto de partida. Copiar o CSS te economiza a parte chata (a animação, o estado de hover, o alinhamento do ícone). O que vem depois — encaixar no seu sistema, garantir acessibilidade e não quebrar a hierarquia da página — é o trabalho que faz diferença, e é sobre isso que este guia trata.

Escolha pelo peso, não pelo efeito

O erro mais comum ao montar uma interface com botões copiados é usar o mais chamativo em todo lugar. Se tudo brilha, nada tem prioridade — e o usuário fica sem saber qual é a ação principal.

Uma página bem resolvida costuma ter três níveis:

  • Primário: um por tela, na ação que você quer que aconteça. É o único que merece preenchimento sólido, cor forte ou animação mais elaborada.
  • Secundário: alternativas legítimas. Contorno fino, sem preenchimento, sem efeito.
  • Terciário: ações de baixa consequência (cancelar, voltar, "ver mais"). Praticamente um link — texto e nada mais.

Ou seja: os botões mais elaborados desta galeria são para o nível primário e devem aparecer uma vez. Os neon e 3D funcionam muito bem em uma landing page com um único CTA, e funcionam muito mal num painel administrativo cheio de ações.

Acessibilidade: cinco checagens de trinta segundos

Essa é a parte que quase nenhum botão copiado da internet resolve, porque quem publica um snippet está mostrando um efeito visual, não entregando um componente pronto. Antes de mandar para produção, confira:

  1. É mesmo um <button>? Muito snippet usa <div> ou <a> estilizado. div não recebe foco pelo teclado nem é anunciado como botão por leitor de tela. Regra simples: se navega para outra página, é <a>; se executa uma ação, é <button>.
  2. Dá para chegar nele com Tab e acionar com Enter e Espaço? Teste agora, sem mouse. Se não dá, o elemento está errado.
  3. O foco é visível? Muitos efeitos bonitos incluem outline: none para "limpar" o visual — e com isso quem navega por teclado perde completamente a noção de onde está. Se o contorno padrão atrapalha o design, substitua por um estado de foco próprio; nunca simplesmente remova.
  4. O contraste do texto passa? A recomendação de acessibilidade pede pelo menos 4,5:1 entre texto e fundo. Botão com texto branco sobre gradiente claro é o caso que mais reprova — e o gradiente complica, porque o contraste muda ao longo da superfície. Meça na parte mais clara.
  5. O alvo de toque tem tamanho suficiente? Em torno de 44 × 44 pixels é o mínimo confortável no celular. Botão pequeno e elegante no desktop costuma virar armadilha no toque.

Vale ainda um cuidado com animação: quem tem sensibilidade a movimento pode ativar a preferência de redução no sistema operacional. Respeitá-la é uma media query só, e evita que o seu botão pulsante cause desconforto real.

Como adaptar ao seu design system sem quebrar a consistência

Colar o CSS como veio é o caminho mais rápido para o seu produto ficar com quatro tons de azul e três raios de canto diferentes. O ajuste vale cinco minutos:

  • Troque as cores cruas por variáveis. Onde o snippet tem #5b3df5, coloque a variável da sua paleta. Se o seu projeto não tem variáveis de cor ainda, esse é um bom motivo para criar.
  • Alinhe o raio e o espaçamento à sua escala. Se o seu sistema usa 8px, não deixe um botão com 6px só porque veio assim.
  • Padronize a duração da transição. Snippets variam entre 0,15s e 0,6s. Escolha um valor para o produto inteiro; velocidade inconsistente é percebida mesmo quando ninguém sabe explicar.
  • Isole o seletor. Trocar button { } por uma classe evita que o estilo copiado vaze para todos os botões da aplicação — inclusive os que você não queria mudar.
  • Confira a fonte. Muitos snippets fixam uma família própria. Remova e deixe herdar a tipografia do seu projeto.

O custo escondido da animação

Nem toda animação custa o mesmo. Animar transform e opacity é barato: o navegador resolve sem recalcular o layout da página. Já animar width, height, top, margin ou box-shadow obriga a refazer cálculo a cada quadro — e num celular modesto, com vários elementos animando ao mesmo tempo, isso aparece como travamento.

Na prática: um botão isolado com animação pesada não derruba nada. Uma lista com quarenta cards, cada um com sombra animada no hover, derruba. Se você for repetir o mesmo botão muitas vezes numa página, prefira os efeitos baseados em transformação e cor.

Outro detalhe que passa despercebido: efeitos que dependem de filter ou backdrop-filter são bonitos e caros. Use com parcimônia em telas com muito conteúdo.

Estados que quase todo snippet esquece

O botão da galeria mostra o estado normal e o hover. Um componente de produto precisa de mais quatro, e é você quem vai escrevê-los:

  • Foco — para quem usa teclado (ver acessibilidade acima).
  • Pressionado — o retorno tátil de que o clique aconteceu. Uma leve redução de escala já resolve.
  • Desabilitado — precisa parecer inativo e ter o atributo correspondente no HTML, senão continua clicável.
  • Carregando — o estado mais esquecido e o que mais gera clique duplicado. Se a ação chama o servidor, o botão precisa comunicar que está processando e recusar novos cliques.

Vale também pensar em como o botão se comporta quando o texto é maior do que o previsto. "Ok" e "Confirmar assinatura anual" no mesmo componente é um teste que muito botão bonito não passa.

Sobre os botões de plataforma (Instagram, WhatsApp, X e afins)

A categoria Plataformas traz botões nas cores e com os ícones das redes — úteis para colocar um "seguir", "compartilhar" ou "chamar no WhatsApp" que combine com o serviço. Três cuidados na hora de usar:

  • São links, não botões de ação. Vêm como <a> porque levam a outro lugar (um perfil, uma conversa). Troque o href="#" pela URL real — no WhatsApp, por exemplo, https://wa.me/55SEUNUMERO.
  • Nome, cor e logo são marcas registradas dos respectivos donos. Usá-los para linkar para o perfil oficial é uso comum, mas não altere o logo, não sugira que a plataforma endossa você e, se for um projeto comercial grande, confira as diretrizes de marca de cada rede.
  • Contraste e toque valem igual. As mesmas cinco checagens de acessibilidade se aplicam — em especial o alvo de 44 pixels nas versões só de ícone.

Perguntas frequentes

Posso usar estes botões em projeto comercial?
Sim. São peças autorais do Devs & IA, livres para usar em qualquer projeto, comercial ou não.
Preciso de algum framework ou biblioteca para usar?
Não. Os exemplos visuais usam HTML e CSS. Os interativos também incluem JavaScript, que deve ser executado depois do HTML. Você pode copiar o exemplo completo para um arquivo .html. Em frameworks, adapte o comportamento ao estado e ao ciclo de vida do componente.
Como faço para mudar a cor de um botão?
Procure os valores de cor no CSS copiado — normalmente em hexadecimal, como #5b3df5 — e troque pelos da sua paleta. Em botões com gradiente há dois ou mais valores a ajustar. Depois de trocar, confira o contraste do texto sobre o novo fundo, porque a mudança de cor costuma quebrar a legibilidade.
Por que o botão ficou diferente no meu projeto?
Quase sempre é conflito de estilo: o seu CSS global já define regras para button ou para a classe usada pelo snippet, e uma delas vence. A solução é renomear a classe do botão copiado para algo único do seu projeto. Outra causa comum é a fonte — se o snippet dependia de uma família específica que você não carrega, o espaçamento muda.
Botão animado prejudica a performance do site?
Depende do que é animado e de quantas vezes ele se repete. Animações de transform e opacity são baratas. Animações de tamanho, posição e sombra obrigam o navegador a recalcular a página a cada quadro e pesam, principalmente em celular e quando o mesmo botão aparece dezenas de vezes na tela.
Devo usar button ou link para estes estilos?
Use <button> quando o elemento executa uma ação na própria página (enviar formulário, abrir modal, confirmar) e <a> quando ele leva para outro endereço. O visual pode ser idêntico, mas a escolha do elemento muda o comportamento para teclado, leitor de tela e para o menu de contexto do navegador — abrir em nova aba, por exemplo, só funciona em link.

Todas as peças desta galeria são criações da redação do Devs & IA, livres para usar.