Buttons
August 03, 2026

Action Suite

Two futuristic variations of interactive buttons with glassmorphism effect, gradients, and Phosphor Icons.

Back to collections
<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>

Project prerequisites

To replicate this component in your development environment, make sure you have:

  • Tailwind CSS: An active installation of Tailwind CSS v3 or v4 in your project.
  • Icon library: This example uses the Iconify CDN for demonstration purposes (check the embed script box above to paste into your HTML head).
  • Custom typography: If you want to use the same font as the demo, include the corresponding Google Fonts link in your project.

How to integrate

  1. Copy the clean HTML from the main code box.
  2. Paste the structure inside the desired container or layout in your application.
  3. If the component uses blur (backdrop-blur) or transparency classes, ensure the parent element has a contrasting background for the visual effect to work properly.

Typography and font usage in your project

This component was built to adapt to your application's design system:

  • Your project's fonts: If you already have a font family configured in your Tailwind CSS, simply replace the temporary font classes with font-sans, font-serif, or font-mono on the main container. The element will automatically inherit your brand's default typography.
  • Specific fonts: If you want to use a different font just for this block, add the corresponding Tailwind utility class (e.g., font-['Plus_Jakarta_Sans']) or declare the font name in your config.

What you can customize

  • Colors and themes: Change the Tailwind utility classes (such as bg-zinc-950, text-white, border-zinc-800) to adapt the colors to your brand palette.
  • Icons: Replace the icon attribute on icon tags with any other Iconify-compatible icon name.

Production best practices

Warning:

The CDN dependencies (such as the external Iconify script and direct Google Fonts links) included in the embed box are meant for quick testing and playground demonstrations. Loading external files via CDN can negatively impact your page load speed (Core Web Vitals) and cause layout shifts (CLS).

For a professional production project, we recommend:

  1. Host fonts locally: Download the font files (.woff2 format) and include them directly in your bundle, or use automated tools like @nuxt/fonts or Fontsource. This reduces external HTTP requests and prevents render-blocking text.
  2. Internal icon package: Instead of loading the Iconify CDN script, install the icon library directly via your package manager (e.g., npm i @iconify/vue, @unplugin-icons, or native libraries like Lucide / Phosphor Icons). That way, only the icons actually used will be included in your final bundle.
Back to collections
Share this