CCHub Logo CCHub Tailwind Collection
Componentes Botón Seguir Componente del botón de seguimiento de Cyberpunk

Componente del botón de seguimiento de Cyberpunk

Un complejo componente de botón "Seguir" de temática cyberpunk para herramientas de CRM/negocios, con una paleta de colores bosque/verde, fondos oscuros y acentos de neón brillantes, con capacidad de respuesta total y compatibilidad con el modo oscuro.

Vista previa

Código HTML 

<div class="flex items-center justify-center p-4 bg-gray-900 min-h-screen dark:bg-black font-mono relative overflow-hidden">

  <!-- Cyberpunk background grid elements -->
  <div class="absolute inset-0 z-0 opacity-10">
    <div class="absolute inset-0 bg-gradient-to-br from-green-900 via-gray-900 to-green-900 animate-pulse-slow"></div>
    <div class="absolute inset-0 bg-grid-pattern-small md:bg-grid-pattern-large opacity-5"></div>
    <div class="absolute inset-0 bg-dots-pattern opacity-5"></div>
  </div>

  <div class="bg-gradient-to-br from-gray-800 to-gray-950 dark:from-gray-950 dark:to-black p-6 md:p-8 rounded-2xl shadow-neon-green border border-green-700/50 relative z-10 w-full max-w-md mx-auto transform hover:scale-[1.01] transition-transform duration-300 ease-in-out">
    
    <!-- Glitch effect pseudo-element for aesthetic -->
    <div class="absolute inset-0 rounded-2xl pointer-events-none after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-br after:from-green-500/20 after:via-transparent after:to-green-500/20 after:animate-glitch after:mix-blend-overlay"></div>

    <div class="flex flex-col items-center space-y-6">
      
      <!-- Profile Card Start -->
      <div class="w-full bg-gray-900 dark:bg-black p-4 rounded-xl border border-green-800 shadow-inner-neon relative">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full border-2 border-green-400 overflow-hidden shadow-md shadow-green-500/30 ring-2 ring-green-600 ring-offset-2 ring-offset-gray-900">
          <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <div class="absolute inset-0 bg-gradient-to-br from-green-500/30 to-transparent animate-pulse-fast opacity-50"></div>
        </div>
        <h2 class="text-2xl font-bold text-green-400 text-center uppercase tracking-wide mb-2">Ava Lux</h2>
        <p class="text-sm text-green-200 text-center mb-4">Product Lead at CyberCorp Solutions</p>
        <div class="grid grid-cols-2 gap-2 text-center text-green-300 text-sm">
          <div>
            <span class="block font-bold text-green-400">1.2k</span>
            <span class="block">Followers</span>
          </div>
          <div>
            <span class="block font-bold text-green-400">987</span>
            <span class="block">Following</span>
          </div>
        </div>
        <div class="mt-4 text-xs text-center text-gray-400 border-t border-green-800 pt-3 flex items-center justify-center">
          <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
          </svg>
          Neo-Tokyo, Block 7
        </div>
      </div>
      <!-- Profile Card End -->

      <!-- Follow Button -->
      <button class="relative w-full py-3 px-6 text-xl font-bold text-black uppercase bg-green-400 rounded-lg overflow-hidden group shadow-lg shadow-green-500/50 transform transition duration-300 ease-in-out hover:scale-105 active:scale-95 button-glow-green">
        <span class="relative z-10">+ Follow</span>
        <div class="absolute inset-0 bg-green-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="absolute inset-0 border-2 border-green-600 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="absolute top-1/2 left-1/2 w-4 h-4 bg-green-200 rounded-full blur-sm opacity-0 group-hover:opacity-100 group-hover:animate-ping-small origin-center transition-all duration-500"></div>
      </button>

      <!-- Message & Options Buttons -->
      <div class="grid grid-cols-2 gap-4 w-full">
        <button class="relative py-3 px-4 text-lg font-bold text-green-300 uppercase bg-gray-800 dark:bg-gray-900 rounded-lg border border-green-700 overflow-hidden group shadow-md shadow-gray-700/50 hover:border-green-400 hover:text-green-200 transition duration-300 ease-in-out button-hover-glitch">
          <span class="relative z-10">Message</span>
        </button>
        <button class="relative py-3 px-4 text-lg font-bold text-green-300 uppercase bg-gray-800 dark:bg-gray-900 rounded-lg border border-green-700 overflow-hidden group shadow-md shadow-gray-700/50 hover:border-green-400 hover:text-green-200 transition duration-300 ease-in-out button-hover-glitch">
          <span class="relative z-10">Profile</span>
        </button>
      </div>

      <!-- Status / Connection Indicator -->
      <div class="flex items-center text-sm text-green-400 mt-4">
        <span class="relative flex h-3 w-3 mr-2">
          <span class="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-3 w-3 bg-green-600"></span>
        </span>
        <span>Active Connection // Online</span>
      </div>

    </div>

    <!-- Bottom UI Elements / Accent Lines -->
    <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-1/2 h-1 bg-green-600 rounded-full shadow-neon-green blur-[1px] opacity-70"></div>
    <div class="absolute top-0 left-0 w-4 h-4 border-l-2 border-t-2 border-green-500 rounded-tl-lg opacity-50"></div>
    <div class="absolute top-0 right-0 w-4 h-4 border-r-2 border-t-2 border-green-500 rounded-tr-lg opacity-50"></div>
    <div class="absolute bottom-0 left-0 w-4 h-4 border-l-2 border-b-2 border-green-500 rounded-bl-lg opacity-50"></div>
    <div class="absolute bottom-0 right-0 w-4 h-4 border-r-2 border-b-2 border-green-500 rounded-br-lg opacity-50"></div>

  </div>
</div>

<style>
  /* Base styles for dark mode */
  :root {
    --tw-shadow-neon-green: 0 0px 10px rgba(50, 205, 50, 0.5), 0 0 20px rgba(50, 205, 50, 0.3), 0 0 30px rgba(50, 205, 50, 0.2);
    --tw-shadow-inner-neon: inset 0 0 5px rgba(50, 205, 50, 0.4), inset 0 0 10px rgba(50, 205, 50, 0.2);
    --color-green-neon: #32CD32; /* LimeGreen */
    --color-green-dark: #1A4d2e; /* Darker Green */
  }

  /* Tailwind specific overrides for custom patterns */
  .bg-grid-pattern-small {
    background-image: linear-gradient(to right, rgba(50,205,50,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(50,205,50,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  .bg-grid-pattern-large {
    background-image: linear-gradient(to right, rgba(50,205,50,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(50,205,50,0.1) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  .bg-dots-pattern {
    background-image: radial-gradient(circle, rgba(50,205,50,0.2) 1px, transparent 1px);
    background-size: 10px 10px;
  }

  /* Custom shadow utilities */
  .shadow-neon-green {
    box-shadow: var(--tw-shadow-neon-green);
  }

  .shadow-inner-neon {
    box-shadow: var(--tw-shadow-inner-neon);
  }

  /* Keyframes for animations */
  @keyframes pulse-slow {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
  }

  @keyframes pulse-fast {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.7; }
  }

  @keyframes ping-small {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
  }

  @keyframes glitch {
    0% { transform: translate(0, 0); opacity: 0.3; }
    20% { transform: translate(-2px, 2px); opacity: 0.6; }
    40% { transform: translate(-2px, -2px); opacity: 0.4; }
    60% { transform: translate(2px, 2px); opacity: 0.7; }
    80% { transform: translate(2px, -2px); opacity: 0.5; }
    100% { transform: translate(0, 0); opacity: 0.3; }
  }

  /* Apply animations */
  .animate-pulse-slow {
    animation: pulse-slow 8s infinite ease-in-out;
  }

  .animate-pulse-fast {
    animation: pulse-fast 2s infinite ease-in-out;
  }

  .animate-ping-small {
    animation: ping-small 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .animate-glitch {
    animation: glitch 0.5s infinite alternate;
  }

  /* Button Glitch Effect for hovers */
  .button-hover-glitch:hover::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, transparent 49%, var(--color-green-neon) 50%, transparent 51%);
      background-size: 200% 100%;
      animation: glitch-line 0.3s steps(1) infinite alternate;
      opacity: 0.2;
  }

  .button-hover-glitch:hover::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, transparent 49%, var(--color-green-neon) 50%, transparent 51%);
      background-size: 200% 100%;
      animation: glitch-line 0.3s steps(1) infinite reverse alternate;
      opacity: 0.2;
  }

  @keyframes glitch-line {
    0% { background-position: 0 0; }
    100% { background-position: -200% 0; }
  }

  /* Button Glow Effect */
  .button-glow-green {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
  }

  .button-glow-green::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(50,205,50,0.6) 0%, transparent 70%);
    animation: rotate-glow 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }

  .button-glow-green:hover::before {
    opacity: 1;
  }

  @keyframes rotate-glow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Dark mode specific styles */
  .dark .bg-gradient-to-br.from-gray-800.to-gray-950 {
    background-image: linear-gradient(to bottom right, #0a0a0a, #000000);
  }
  .dark .shadow-neon-green {
    box-shadow: 0 0px 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.5), 0 0 30px rgba(0, 255, 0, 0.3);
  }
  .dark .shadow-inner-neon {
    box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.3);
  }
  .dark .text-green-400 {
    color: #00FF00; /* Brighter green for dark mode */
  }
  .dark .border-green-700,
  .dark .border-green-800 {
    border-color: #008f00;
  }
  .dark .bg-green-400 {
    background-color: #00e600;
  }
</style>

Componentes relacionados

BrutalistFollowButton

Un botón de seguimiento brutalista con soporte para modo responsivo y oscuro.

Abrir

Componente de botón de seguimiento: estilo monoespaciado/de desarrollador

Un componente complejo e interactivo del botón de seguimiento diseñado para sitios web de noticias/periodismo, con una estética monoespaciada/de desarrollador con colores en tono joya y capacidad de respuesta completa, incluida la compatibilidad con el modo oscuro.

Abrir

Componente del botón de seguimiento neumórfico

Un componente complejo del botón de seguimiento de estilo neumórfico con tonos atardeceres/cálidos, diseñado para plataformas inmobiliarias. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro, lo que hace que los elementos parezcan sobresalir del fondo mediante sombras sutiles.

Abrir