Компонент кнопки «Подписаться» в Cyberpunk

<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>