Botões
03 de agosto de 2026

Action Suite

Duas variações futuristas de botões interativos com efeito glassmorphism, gradientes e Phosphor Icons.

Voltar as coleções
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,700&display=swap" rel="stylesheet">
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<body
        class="bg-zinc-950 text-zinc-100 min-h-screen flex flex-col items-center justify-center gap-14 p-12 antialiased selection:bg-zinc-800">
        <!-- Botão 1 -->
        <button
            class="group relative p-[1px] rounded-2xl bg-gradient-to-r from-emerald-600 via-teal-500 to-cyan-400 hover:from-cyan-400 hover:via-teal-500 hover:to-emerald-600 transition-all duration-500 shadow-xl shadow-emerald-500/10 hover:shadow-emerald-500/20 outline-none">
            <div
                class="flex items-center justify-center gap-3 px-6 py-3 rounded-[15px] bg-zinc-950/90 backdrop-blur-xl transition-all duration-300 group-hover:bg-zinc-950/70 w-full h-full">
                <iconify-icon icon="ph:file-code-duotone"
                    class="text-xl text-emerald-400 group-hover:scale-125 group-hover:rotate-12 transition-all duration-300 flex-shrink-0"></iconify-icon>
                <span class="font-medium text-sm text-zinc-200 group-hover:text-white leading-none">Visualizar
                    arquivo</span>
                <span class="relative flex h-2 w-2 ml-1 flex-shrink-0">
                    <span
                        class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                </span>
            </div>
        </button>
        <!-- Botão 2 -->
        <button
            class="group relative p-[1px] rounded-2xl bg-gradient-to-r from-violet-600 via-fuchsia-500 to-cyan-400 hover:from-cyan-400 hover:via-fuchsia-500 hover:to-violet-600 transition-all duration-500 shadow-xl shadow-fuchsia-500/10 hover:shadow-fuchsia-500/20 outline-none">
            <div
                class="flex items-center justify-center gap-3 px-6 py-3 rounded-[15px] bg-zinc-950/90 backdrop-blur-xl transition-all duration-300 group-hover:bg-zinc-950/70 w-full h-full">
                <iconify-icon icon="ph:rocket-launch-duotone"
                    class="text-xl text-fuchsia-400 group-hover:scale-125 group-hover:-translate-y-0.5 transition-all duration-300 flex-shrink-0"></iconify-icon>
                <span class="font-medium text-sm text-zinc-200 group-hover:text-white leading-none">Deploy
                    produção</span>
                <span class="relative flex h-2 w-2 ml-1 flex-shrink-0">
                    <span
                        class="animate-ping absolute inline-flex h-full w-full rounded-full bg-fuchsia-400 opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2 w-2 bg-fuchsia-500"></span>
                </span>
            </div>
        </button>
</body>

Pré-requisitos do projeto

Para reproduzir este componente em seu ambiente de desenvolvimento, certifique-se de ter:

  • Tailwind CSS: Instalação ativa do Tailwind CSS v3 ou v4 no projeto.
  • Biblioteca de ícones: Este exemplo utiliza a CDN do Iconify para fins de demonstração (verifique a caixa de script de incorporação acima para colar no cabeçalho do seu HTML).
  • Tipografia personalizada: Caso deseje utilizar a mesma fonte da demonstração, inclua o link do Google Fonts correspondente no seu projeto.

Como integrar

  1. Copie o HTML limpo na caixa de código principal.
  2. Cole a estrutura dentro do container ou layout desejado na sua aplicação.
  3. Se o componente utilizar classes de desfoque (backdrop-blur) ou transparência, garanta que o elemento pai tenha um fundo contrastante para o efeito visual funcionar corretamente.

Tipografia e uso de fontes do seu projeto

Este componente foi construído para se adaptar ao design system da sua aplicação:

  • Fontes do seu projeto: Se você já possui uma família tipográfica configurada no seu Tailwind CSS, basta substituir as classes temporárias de fonte por font-sans, font-serif ou font-mono no container principal. O elemento herdará automaticamente a tipografia padrão da sua marca.
  • Fontes específicas: Caso queira usar uma fonte diferente apenas para este bloco, adicione a classe utilitária do Tailwind correspondente (ex: font-['Plus_Jakarta_Sans']) ou declare o nome da fonte na sua configuração.

O que você pode personalizar

  • Cores e temas: Altere as classes utilitárias do Tailwind (como bg-zinc-950, text-white, border-zinc-800) para adaptar as cores à paleta da sua marca.
  • Ícones: Substitua o atributo icon das tags de ícone por qualquer outro nome de ícone compatível com o Iconify.

Boas práticas para produção

Aviso:

As dependências via CDN (como o script externo do Iconify e links diretos do Google Fonts) incluídas na caixa de incorporação servem para testes rápidos e demonstração no playground. O carregamento de arquivos externos via CDN pode impactar negativamente a velocidade de carregamento da sua página (Core Web Vitals) e causar oscilações visuais (CLS).

Para um projeto em produção profissional, recomendamos:

  1. Hospedar fontes localmente: Baixe os arquivos de fonte (formato .woff2) e inclua-os diretamente no seu bundle ou utilize ferramentas automatizadas como o @nuxt/fonts ou Fontsource. Isso reduz requisições HTTP externas e evita o bloqueio de renderização do texto.
  2. Pacote interno de ícones: Em vez de carregar o script CDN do Iconify, instale a biblioteca de ícones diretamente no seu gerenciador de pacotes (ex: npm i @iconify/vue, @unplugin-icons ou bibliotecas nativas como Lucide / Phosphor Icons). Dessa forma, apenas os ícones efetivamente utilizados serão incluídos no seu bundle final.
Voltar as coleções
Compartilhar