Sólido Primário
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Ferramenta
Botões CSS prontos para copiar
406 botões com preview ao vivo. Escolha, veja funcionando e copie o HTML e o CSS num clique. As abas Originais e Por profissão reúnem peças nossas, escritas com estado de foco, estado desabilitado e respeito à preferência de menos animação — o que a maioria dos snippets da internet não traz. Em Por profissão os botões já vêm com o texto e o comportamento de cada ramo: agendar test drive, chamar guincho 24h, marcar banho e tosa, emitir NF-e. O restante vem da comunidade uiverse.io (licença MIT).
Contorno Secundário
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Fantasma Terciário
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Perigo (ação destrutiva)
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Carregando (spinner)
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Sucesso com marca
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Ícone circular (só ícone)
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Seta que avança
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Sublinhado editorial
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Pílula com contador
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Elevação sutil
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Preenchimento lateral
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Bloco largo (mobile)
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Duplo (grupo de ações)
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Alternador (toggle)
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Escuro invertido
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Compacto de tabela
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Traço animado
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Card clicável
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Copiar com retorno
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Link externo
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Gradiente contido
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Etiqueta de filtro
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Voltar discreto
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Grupo segmentado
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Dividido com menu
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Enviar arquivo
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Paginação
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Curtir com contador
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Alternar tema
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Compartilhar
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Expandir e recolher
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Gravar áudio
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Ação de tabela
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Passo a passo
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Chamada com custo
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Filtro com contagem
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Flutuante de ação
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Entrar com provedor
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Barra de progresso em botão
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Aviso destrutivo com confirmação
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Etiqueta removível
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Copiar com retorno de estado
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Voltar ao topo
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Fintech — Secure Pay
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
IA — Neural Processing
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Engenharia — Blueprint Calculator
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Arquitetura — 3D Elevation
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
DevTools — Terminal Sync
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
B2B Corporativo — Report Generation
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
E-commerce — Fast Checkout
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Saúde — Health Pulse
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Linear Shimmer Beam
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Glassmorphic Glow Pill
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Tactile Dark 3D
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Cyber-Industrial Mono
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Enviar com progresso
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Curtir com contador
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Glass primário
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Glass contorno
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Brutalista sólido
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Brutalista sticker
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Tátil push 3D
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Tátil pílula squish
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Gradiente Solar Shimmer
Gradientepor Redação Devs & IA · original, com foco e estado desabilitado
Cyber Neon Glow
Neonpor Redação Devs & IA · original, com foco e estado desabilitado
Tátil 3D Pressionável
3Dpor Redação Devs & IA · original, com foco e estado desabilitado
Ícone Expansível Minimalista
Íconespor Redação Devs & IA · original, com foco e estado desabilitado
Pulso Neural Animado
Animaçãopor Redação Devs & IA · original, com foco e estado desabilitado
Retrô Pixel Command
Retrôpor Redação Devs & IA · original, com foco e estado desabilitado
Borda Aurora Gradiente
Gradientepor Redação Devs & IA · original, com foco e estado desabilitado
E-Commerce Checkout Rápido
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Chamada Principal — Seta Deslizante
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Link Editorial — Sublinhado Progressivo
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Vidro Fosco — CTA Translúcido
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Contorno com Preenchimento Deslizante
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Borda em Gradiente Animada
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Botão Tátil — Pressão Suave
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Circular Flutuante — Ação Rápida
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Dividido — Ação Principal e Menu
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Terminal — Prompt Piscante
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Contorno Pontilhado — Adicionar
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Pill Duotone — Alternância de Ênfase
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Gastronomia — Pedido ao Chef
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Gastronomia — Reserva Mesa VIP
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Gastronomia — Chamar Garçom
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Gastronomia — Calculando Conta
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Gastronomia — Menu Degustação
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Confeitaria — Encomenda de Bolos
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Confeitaria — Adicionar ao Carrinho
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Confeitaria — Orçamento de Festa
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Confeitaria — Entrega de Doces
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Confeitaria — Personalizar Recheio
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Concessionária — Agendar Test Drive
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Concessionária — Simular Financiamento
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Concessionária — Avaliar Meu Usado
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Concessionária — Ficha Técnica
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Concessionária — Reservar Veículo
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Mecânica — Orçamento de Peças
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Mecânica — Agendar Revisão
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Mecânica — Scanner de Injeção
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Mecânica — Guincho 24h
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Mecânica — Aprovar Orçamento
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Advocacia — Consulta Jurídica
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Advocacia — Andamento do Processo
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Advocacia — Parecer Jurídico
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Advocacia — Falar com Advogado
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Advocacia — Enviar Documentos
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Contabilidade — Balancete Contábil
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Contabilidade — Impostos DAS/DARF
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Contabilidade — Emitir NF-e
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Contabilidade — Migrar Empresa
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Contabilidade — Relatório IRPF
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Odontologia — Avaliação Dental
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Odontologia — Validar Convênio
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Odontologia — Marcar Consulta
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Odontologia — Ver Exames
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Odontologia — Telemedicina 24h
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Barbearia — Reservar Horário
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Barbearia — Escolher Barbeiro
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Barbearia — Combo Cabelo + Barba
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Barbearia — Comprar Produtos
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Barbearia — Assinar Clube VIP
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Pet Shop — Banho e Tosa
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Pet Shop — Emergência Vet 24h
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Pet Shop — Comprar Ração
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Pet Shop — Agendar Vacina
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Pet Shop — Reservar Hotelzinho
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Fitness — Passe Grátis 7 Dias
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Fitness — Gerando Treino
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Fitness — Matricular na Academia
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Fitness — Avaliação Física
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Fitness — Contratar Personal
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Supermercados — Entrega Expressa 30 min
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Tatuadores — Orçamento Flash Tattoo
Por profissãopor Redação Devs & IA · original, com foco e estado desabilitado
Instagram — Sólido gradiente
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Instagram — Contorno gradiente
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Instagram — Ícone expande
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Instagram — Vidro (glass)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Instagram — Redondo (só ícone)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
X — Sólido preto
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
X — Contorno
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
X — Ícone expande
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
X — Neubrutalist
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
X — Redondo (só ícone)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
TikTok — Sólido glitch
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
TikTok — Contorno ciano
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
TikTok — Ícone expande
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
TikTok — Gradiente marca
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
TikTok — Redondo (só ícone)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Facebook — Sólido
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Facebook — Contorno
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Facebook — Ícone expande
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Facebook — Suave (soft)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Facebook — Redondo (só ícone)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
LinkedIn — Sólido
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
LinkedIn — Contorno (pílula)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
LinkedIn — Ícone expande
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
LinkedIn — Suave (soft)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
LinkedIn — Redondo (só ícone)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
WhatsApp — Sólido
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
WhatsApp — Contorno
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
WhatsApp — Ícone expande
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
WhatsApp — Bolha de chat
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
WhatsApp — Redondo (só ícone)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Telegram — Sólido
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Telegram — Contorno
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Telegram — Ícone expande
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Telegram — Gradiente
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Telegram — Redondo (só ícone)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
YouTube — Sólido
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
YouTube — Contorno
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
YouTube — Ícone expande
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
YouTube — Suave (soft)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
YouTube — Redondo (só ícone)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Spotify — Sólido (pílula)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Spotify — Contorno (pílula)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Spotify — Ícone expande
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Spotify — Escuro
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Spotify — Redondo (só ícone)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Twitch — Sólido
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Twitch — Contorno
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Twitch — Ícone expande
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Twitch — Ao vivo (pulse)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Twitch — Redondo (só ícone)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Discord — Sólido
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Discord — Contorno
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Discord — Ícone expande
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Discord — Suave (soft)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Discord — Redondo (só ícone)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Pinterest — Sólido (pílula)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Pinterest — Contorno (pílula)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Pinterest — Ícone expande
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Pinterest — Suave (soft)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Pinterest — Redondo (só ícone)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Kwai — Sólido
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Kwai — Contorno
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Kwai — Ícone expande
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Kwai — Gradiente
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Kwai — Redondo (só ícone)
Plataformaspor Redação Devs & IA · original, com foco e estado desabilitado
Neubrutalism — Sólido
Neubrutalismpor Redação Devs & IA · original, com foco e estado desabilitado
Neubrutalism — Contorno
Neubrutalismpor Redação Devs & IA · original, com foco e estado desabilitado
Pushable 3D — Físico
3Dpor Redação Devs & IA · original, com foco e estado desabilitado
Pushable 3D — Índigo
3Dpor Redação Devs & IA · original, com foco e estado desabilitado
Minimalista — Sublinhado que cresce
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Minimalista — Sombra suave
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Retrô — Pixel
Retrôpor Redação Devs & IA · original, com foco e estado desabilitado
Retrô — Relevo 90s
Retrôpor Redação Devs & IA · original, com foco e estado desabilitado
Minimalista — Borda em gradiente
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Neomórfico — Suave
Originaispor Redação Devs & IA · original, com foco e estado desabilitado
Quick Snail 70
3Dpor kosedagyazilim · uiverse.io
Hot Catfish 48
3Dpor adamgiebl · uiverse.io
Rare Treefrog 56
Íconespor Creatlydev · uiverse.io
Lucky Bobcat 47
Gradientepor shivam_7937 · uiverse.io
Tidy Mayfly 7
Gradientepor levxyca · uiverse.io
Fast Mouse 17
Neonpor ryota1231 · uiverse.io
Moody Badger 62
Neonpor mrhyddenn · uiverse.io
Big Stingray 4
Animaçãopor Ali-Tahmazi99 · uiverse.io
Silent Ape 24
Animaçãopor Web-Potato · uiverse.io
Nasty Wasp 56
Animaçãopor nikk7007 · uiverse.io
Rude Wolverine 24
Gradientepor satyamchaudharydev · uiverse.io
Orange Donkey 78
Íconespor AKAspidey01 · uiverse.io
Soft Turtle 49
Gradientepor NorthFishHasNa · uiverse.io
Unlucky Rattlesnake 65
Gradientepor elijahgummer · uiverse.io
Thin Duck 22
Íconespor vinodjangid07 · uiverse.io
Average Chipmunk 44
Animaçãopor barisdogansutcu · uiverse.io
Giant Donkey 36
Gradientepor adamgiebl · uiverse.io
Ugly Jellyfish 9
Íconespor Bodyhc · uiverse.io
Angry Dragonfly 77
Íconespor OnCloud125252 · uiverse.io
Angry Snake 12
Gradientepor faizanullah1999 · uiverse.io
Smart Emu 83
Íconespor vinodjangid07 · uiverse.io
Modern Mouse 31
Gradientepor Itskrish01 · uiverse.io
Slimy Horse 19
Animaçãopor vikiWayne · uiverse.io
Rude Bear 14
Animaçãopor adamgiebl · uiverse.io
Friendly Turkey 54
Gradientepor gharsh11032000 · uiverse.io
Perfect Penguin 77
Gradientepor zanina-yassine · uiverse.io
Green Chipmunk 67
3Dpor Damithkumara · uiverse.io
Purple Kangaroo 17
Animaçãopor KINGFRESS · uiverse.io
Cold Bat 89
Retrôpor mobinkakei · uiverse.io
Massive Snail 29
Neonpor shokat_2650 · uiverse.io
Terrible Catfish 72
3Dpor Madflows · uiverse.io
Blue Dodo 17
Retrôpor krlozCJ · uiverse.io
Pretty Lionfish 11
Gradientepor AqFox · uiverse.io
Fat Eagle 24
Animaçãopor 212004ALJI · uiverse.io
Popular Termite 0
Animaçãopor adamgiebl · uiverse.io
Quiet Rattlesnake 27
Animaçãopor felipesntr · uiverse.io
Young Newt 20
Neonpor dexter-st · uiverse.io
Silent Kangaroo 88
3Dpor mobinkakei · uiverse.io
Afraid Falcon 17
Íconespor vinodjangid07 · uiverse.io
Perfect Warthog 57
Neonpor niat786 · uiverse.io
Shaggy Grasshopper 91
Gradientepor adamgiebl · uiverse.io
Nasty Deer 97
Animaçãopor Botwe-Felix5820 · uiverse.io
Big Crab 49
Animaçãopor TimTrayler · uiverse.io
Old Termite 43
Neonpor cybrejon · uiverse.io
Big Ape 36
3Dpor adamgiebl · uiverse.io
Chilly Sloth 36
Animaçãopor ilkhoeri · uiverse.io
Soft Dolphin 57
Íconespor gagan-gv · uiverse.io
Rare Owl 43
Gradientepor barisdogansutcu · uiverse.io
Little Penguin 13
Animaçãopor barisdogansutcu · uiverse.io
Quick Stingray 2
Íconespor JaydipPrajapati1910 · uiverse.io
Spotty Horse 48
Neonpor StealthWorm · uiverse.io
Big Moose 69
Íconespor barisdogansutcu · uiverse.io
Wise Moth 35
Gradientepor adamgiebl · uiverse.io
Loud Badger 55
Neonpor suda-code · uiverse.io
Brave Ladybug 0
Íconespor vinodjangid07 · uiverse.io
Fuzzy Owl 53
Gradientepor Mubashir222 · uiverse.io
Dull Mole 49
Animaçãopor Pradeepsaranbishnoi · uiverse.io
Dull Ladybug 18
Íconespor vinodjangid07 · uiverse.io
Tough Cobra 42
Gradientepor milegelu · uiverse.io
Fresh Tiger 82
Animaçãopor vinodjangid07 · uiverse.io
Bitter Termite 36
Animaçãopor fthisilak · uiverse.io
Angry Dragonfly 60
Animaçãopor Sergestra · uiverse.io
Young Eagle 60
Gradientepor gksckt · uiverse.io
Tall Mayfly 60
Animaçãopor Gaurav-WebDev · uiverse.io
Red Crab 98
Neonpor dexter-st · uiverse.io
Terrible Rat 80
3Dpor SelfMadeSystem · uiverse.io
Modern Sloth 8
Íconespor Jedi-hongbin · uiverse.io
Rotten Fish 89
Animaçãopor gagan-gv · uiverse.io
Clever Crab 26
Íconespor karthik092726122003 · uiverse.io
Good Octopus 19
Íconespor d4niz · uiverse.io
Horrible Emu 23
Gradientepor pruthivithejan · uiverse.io
Unlucky Mayfly 5
3Dpor Nawsome · uiverse.io
Loud Seahorse 55
Animaçãopor satyamchaudharydev · uiverse.io
Wise Ladybug 7
Gradientepor JsGrisales · uiverse.io
Helpless Tiger 55
Neonpor Spacious74 · uiverse.io
Dull Dog 37
Gradientepor kamehame-ha · uiverse.io
Loud Chicken 53
Neonpor gharsh11032000 · uiverse.io
Stupid Parrot 100
Animaçãopor gagan-gv · uiverse.io
Tiny Chipmunk 51
Animaçãopor Nawsome · uiverse.io
Massive Insect 65
Animaçãopor adamgiebl · uiverse.io
Pretty Bat 39
3Dpor aguerquin · uiverse.io
Tough Lionfish 7
Gradientepor zaby_4213 · uiverse.io
Great Seahorse 44
Gradientepor satyamchaudharydev · uiverse.io
Curly Crab 71
Animaçãopor vinodjangid07 · uiverse.io
Grumpy Crab 66
Gradientepor Creatlydev · uiverse.io
Short Dodo 73
Íconespor Yaya12085 · uiverse.io
New Bird 34
Íconespor adamgiebl · uiverse.io
Popular Puma 87
Animaçãopor Priyanshu02020 · uiverse.io
Little Tiger 48
Gradientepor jubayer-10 · uiverse.io
Heavy Badger 29
Gradientepor vinodjangid07 · uiverse.io
Massive Goat 19
Neonpor gagan-gv · uiverse.io
Brave Mole 100
Gradientepor PriyanshuGupta28 · uiverse.io
Tame Hound 72
Animaçãopor Gaurav-WebDev · uiverse.io
Wicked Cobra 3
Retrôpor Gautammsharma · uiverse.io
Fluffy Quail 74
Íconespor catraco · uiverse.io
Massive Moose 26
Íconespor vinodjangid07 · uiverse.io
Purple Wasp 14
Gradientepor adamgiebl · uiverse.io
Fresh Turkey 35
Animaçãopor McHaXYT · uiverse.io
Tasty Yak 79
Íconespor andrew-demchenk0 · uiverse.io
Average Liger 0
Gradientepor AlimurtuzaCodes · uiverse.io
Brown Grasshopper 46
Animaçãopor Randdose · uiverse.io
Tiny Dog 80
Neonpor dopekid_9309 · uiverse.io
Lucky Bulldog 57
Animaçãopor vinodjangid07 · uiverse.io
Pink Chicken 70
Gradientepor adamgiebl · uiverse.io
Brown Emu 91
Gradientepor zebra76966 · uiverse.io
Plastic Quail 42
Gradientepor Yaya12085 · uiverse.io
Perfect Badger 81
3Dpor Mike11jr · uiverse.io
Spotty Snake 82
Neonpor FColombati · uiverse.io
Dull Dragonfly 23
Gradientepor ZacharyCrespin · uiverse.io
Pretty Grasshopper 57
Íconespor Creatlydev · uiverse.io
Quiet Dog 6
Retrôpor 0xnihilism · uiverse.io
Blue Eagle 63
Íconespor SpatexDEV · uiverse.io
Swift Newt 52
3Dpor doniaskima · uiverse.io
Great Fish 88
Animaçãopor MuhammadHasann · uiverse.io
Modern Stingray 68
Íconespor xopc333 · uiverse.io
Spotty Catfish 33
Íconespor catraco · uiverse.io
Foolish Sloth 90
Gradientepor gharsh11032000 · uiverse.io
Tricky Baboon 12
Animaçãopor mrhyddenn · uiverse.io
Fuzzy Warthog 48
Gradientepor Itskrish01 · uiverse.io
Modern Sheep 10
Animaçãopor satyamchaudharydev · uiverse.io
Fuzzy Rabbit 3
Animaçãopor Javierrocadev · uiverse.io
Odd Wasp 42
Animaçãopor SupportHotline · uiverse.io
Wicked Sloth 7
Animaçãopor mi-series · uiverse.io
Clever Swan 13
Neonpor harsh_8704 · uiverse.io
Chilly Newt 81
Íconespor vinodjangid07 · uiverse.io
Cuddly Turkey 5
Gradientepor gharsh11032000 · uiverse.io
Great Insect 77
Animaçãopor mobinkakei · uiverse.io
Unlucky Treefrog 77
Gradientepor Kabak · uiverse.io
Wise Walrus 71
3Dpor mobinkakei · uiverse.io
Neat Bear 90
Gradientepor SalladShooter · uiverse.io
Warm Zebra 80
Animaçãopor Mike11jr · uiverse.io
Witty Rabbit 59
Neonpor TaniaDou · uiverse.io
Loud Walrus 26
Animaçãopor LilaRest · uiverse.io
Cowardly Crab 22
Gradientepor mahiatlinux · uiverse.io
Yellow Pug 84
Animaçãopor tirth_5172 · uiverse.io
Witty Firefox 53
Íconespor Yaya12085 · uiverse.io
Dangerous Horse 41
Gradientepor kleenpulse · uiverse.io
Little Puma 84
Gradientepor zymantas-katinas · uiverse.io
Great Ape 33
Gradientepor vinodjangid07 · uiverse.io
Short Starfish 66
Gradientepor catraco · uiverse.io
Lovely Zebra 28
Animaçãopor arthur_6104 · uiverse.io
Nervous Goat 3
Gradientepor ShadowShahriar · uiverse.io
Serious Stingray 77
Gradientepor yaasiinaxmed · uiverse.io
Old Catfish 59
Gradientepor doniaskima · uiverse.io
Nervous Wombat 2
Gradientepor doniaskima · uiverse.io
Tidy Sloth 40
Neonpor zjssun · uiverse.io
Ancient Goose 30
Gradientepor mobinkakei · uiverse.io
Loud Bird 67
Animaçãopor Navarog21 · uiverse.io
Loud Mayfly 89
3Dpor barisdogansutcu · uiverse.io
Brown Quail 36
Animaçãopor AKAspidey01 · uiverse.io
Heavy Emu 25
Animaçãopor carlosepcc · uiverse.io
Average Swan 99
Íconespor Praashoo7 · uiverse.io
Strong Pug 22
Gradientepor Allyhere · uiverse.io
Rotten Pig 19
Gradientepor xueyuantan · uiverse.io
Strange Bobcat 47
Íconespor felipesntr · uiverse.io
Hard Turkey 58
Neonpor elijahgummer · uiverse.io
Stupid Vampirebat 24
Neonpor marcelodolza · uiverse.io
Lovely Fox 50
Gradientepor yaroslavas2001 · uiverse.io
Ugly Robin 41
Neonpor adamgiebl · uiverse.io
Tidy Starfish 71
Retrôpor sekaiking · uiverse.io
Great Rat 93
Neonpor GreyD097 · uiverse.io
Happy Dragonfly 63
Animaçãopor andrew-demchenk0 · uiverse.io
Soft Mayfly 11
3Dpor Mike11jr · uiverse.io
Hungry Parrot 44
Íconespor satyamchaudharydev · uiverse.io
Slippery Moth 23
Neonpor namecho · uiverse.io
Shaggy Eel 44
Gradientepor Itskrish01 · uiverse.io
Tall Termite 79
Íconespor vinodjangid07 · uiverse.io
Giant Termite 81
Animaçãopor andrew-demchenk0 · uiverse.io
Dangerous Pug 9
Animaçãopor vinodjangid07 · uiverse.io
Ugly Emu 27
Íconespor alshahwan · uiverse.io
Bright Chicken 11
Íconespor elijahgummer · uiverse.io
Soft Skunk 68
Animaçãopor Itskrish01 · uiverse.io
Chatty Pug 36
Neonpor Smit-Prajapati · uiverse.io
Empty Lion 5
Neonpor lenfear23 · uiverse.io
New Shrimp 32
Animaçãopor e-coders · uiverse.io
Moody Mule 8
Animaçãopor Shakil-Babu · uiverse.io
Curly Dog 0
Gradientepor M4rco592 · uiverse.io
Orange Lionfish 62
Gradientepor KhelVers · uiverse.io
Breezy Zebra 94
Neonpor dexter-st · uiverse.io
Sharp Quail 80
Íconespor Yaya12085 · uiverse.io
Sweet Rabbit 5
Neonpor elijahgummer · uiverse.io
Red Stingray 4
Íconespor mrhyddenn · uiverse.io
Dangerous Monkey 48
Gradientepor augustin_4687 · uiverse.io
Smart Ladybug 29
Animaçãopor e-coders · uiverse.io
Funny Impala 9
Neonpor catraco · uiverse.io
Loud Baboon 15
3Dpor JkHuger · uiverse.io
Pretty Octopus 33
Íconespor vinodjangid07 · uiverse.io
Mighty Moose 66
Íconespor andrew-demchenk0 · uiverse.io
Kind Otter 31
Íconespor kamehame-ha · uiverse.io
Stale Dog 84
Íconespor Cksunandh · uiverse.io
White Bear 69
Animaçãopor andrew-demchenk0 · uiverse.io
Smart Moth 68
Animaçãopor adamgiebl · uiverse.io
Little Mole 12
Íconespor geekgao · uiverse.io
Soft Crab 61
Gradientepor alexreyes091 · uiverse.io
Moody Horse 75
Gradientepor niat786 · uiverse.io
Serious Shrimp 82
Animaçãopor Cevorob · uiverse.io
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:
- É mesmo um
<button>? Muito snippet usa<div>ou<a>estilizado.divnã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>. - 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.
- O foco é visível? Muitos efeitos bonitos incluem
outline: nonepara "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. - 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.
- 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 ohref="#"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. Os botões vêm da comunidade uiverse.io e são distribuídos sob licença MIT, que permite uso comercial. A licença pede a manutenção do aviso de copyright — por isso o autor de cada peça está creditado no card correspondente. Mantenha o crédito e você está em dia.
- Preciso de algum framework ou biblioteca para usar?
- Não. Todos são HTML e CSS puro. Basta colar o HTML onde o botão deve aparecer e o CSS na sua folha de estilo. Funcionam igual em React, Vue, Angular, WordPress ou uma página HTML solta.
- 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.
As peças das abas Originais e Por profissão são criações da redação do Devs & IA, livres para usar. Os demais botões vêm da comunidade uiverse.io, distribuídos sob licença MIT — os créditos e links para os autores estão em cada card, e nesses o mérito do design é de cada autor.