Search Components

Follow Button

Button to follow users or topics

Cyberpunk Follow Button Component

A complex, cyberpunk-themed 'Follow' button component for CRM/business tools, featuring a forest/green color palette, dark backgrounds, and bright neon accents, with full responsiveness and dark mode support.

Open Preview

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

3D_Analogous_Simple_Follow_Button_Component

A simple, responsive 'Follow' button with a 3D aesthetic and analogous color scheme, suitable for a portfolio site, supporting light and dark modes.

Open Preview

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-[150px]">
  <button class="relative group w-32 h-12 rounded-lg overflow-hidden font-semibold transition-all duration-300 ease-in-out
                     bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-700 dark:to-purple-800
                     text-white shadow-lg dark:shadow-xl
                     active:translate-y-0.5 active:shadow-sm
                     hover:from-indigo-600 hover:to-purple-700 dark:hover:from-indigo-800 dark:hover:to-purple-900">
    
    <!-- Front face of the button -->
    <div class="absolute inset-0 flex items-center justify-center
                bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-700 dark:to-purple-800
                rounded-lg
                transition-all duration-300 ease-in-out
                group-hover:opacity-0 group-hover:translate-y-full
                group-active:translate-y-0.5 group-active:shadow-sm">
      Follow
    </div>

    <!-- Back face (pressed state) / Alternative state -->
    <div class="absolute inset-0 flex items-center justify-center
                bg-gradient-to-br from-purple-600 to-pink-500 dark:from-purple-800 dark:to-pink-700
                rounded-lg
                transition-all duration-300 ease-in-out
                origin-top
                group-hover:translate-y-0 group-hover:opacity-100 group-hover:scale-y-1
                -translate-y-full opacity-0 scale-y-0
                transform-gpu
                z-10">
      Following!
    </div>

    <!-- Shadow/Depth effect -->
    <div class="absolute inset-x-2 bottom-0 h-2 bg-gradient-to-br from-indigo-700 to-purple-800 dark:from-indigo-900 dark:to-purple-900 rounded-b-lg
                filter blur-sm opacity-70 transition-all duration-300 ease-in-out
                group-hover:h-0 group-hover:opacity-0
                group-active:h-0 group-active:opacity-0"></div>

  </button>
</div>

Glassmorphism_Music_Follow_Button_Component

A complex, monochromatic glassmorphism follow button component designed for music and audio platforms, featuring frosted glass-like translucent elements with blur effects, fully responsive and with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="relative w-full max-w-sm p-6 rounded-2xl shadow-xl overflow-hidden backdrop-blur-lg bg-white/30 dark:bg-gray-800/30 ring-1 ring-inset ring-white/50 dark:ring-gray-700/50 transform-gpu transition-all duration-500 hover:scale-105 hover:shadow-2xl">
    <!-- Background overlay for glass effect -->
    <div class="absolute inset-0 z-0 bg-gradient-to-br from-blue-300/40 dark:from-sky-700/40 to-indigo-500/40 dark:to-blue-900/40 blur-3xl opacity-60 dark:opacity-40 pointer-events-none"></div>

    <div class="relative z-10 flex flex-col items-center text-center space-y-4">

      <!-- Artist/Profile Image -->
      <div class="relative w-24 h-24 rounded-full overflow-hidden border-4 border-white/70 dark:border-gray-600/70 shadow-lg group-hover:scale-110 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/5.jpg" alt="Artist Avatar" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
      </div>

      <!-- Artist Name and Details -->
      <div>
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mt-2 drop-shadow-sm">Aurora Rhapsody</h3>
        <p class="text-md text-gray-600 dark:text-gray-300">Electronic / Ambient Artist</p>
        <div class="flex justify-center items-center text-sm text-gray-700 dark:text-gray-400 space-x-2 mt-1">
          <span><strong class="font-semibold">1.2M</strong> Followers</span>
          <span class="h-1 w-1 bg-gray-500 rounded-full"></span>
          <span><strong class="font-semibold">30</strong> Tracks</span>
        </div>
      </div>

      <!-- Follow Button -->
      <button class="follow-button group relative px-6 py-3 rounded-full overflow-hidden shadow-lg bg-blue-500/60 dark:bg-sky-700/60 transition-all duration-300 ring-1 ring-inset ring-blue-400/80 dark:ring-sky-600/80 transform-gpu hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-sky-500">
        <!-- Glassmorphism background for button -->
        <span class="absolute inset-0 bg-blue-400/30 dark:bg-sky-600/30 backdrop-blur-sm group-hover:bg-blue-500/40 dark:group-hover:bg-sky-700/40 transition-colors duration-300"></span>
        <span class="relative z-10 flex items-center text-lg font-semibold text-white group-hover:text-white dark:text-white drop-shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 transition-transform group-hover:rotate-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 14v4m-2 2h4m-2-6a4 4 0 100-8 4 4 0 000 8z" />
          </svg>
          Follow
        </span>
      </button>

      <!-- CTA / More Info -->
      <a href="#" class="text-sm text-gray-700 dark:text-gray-400 hover:underline mt-4">
        <span class="flex items-center space-x-1">
          <span>View Profile</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </span>
      </a>

    </div>
  </div>
</div>

Follow Button Component

A complex follow button component designed with a glassmorphism effect, using a complementary color scheme, suitable for e-commerce applications, featuring responsive design and dark theme support.

Open Preview

                <div class="flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white bg-opacity-30 backdrop-blur-lg border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-6 w-80">
        <div class="flex flex-col items-center">
            <img class="rounded-full w-16 h-16 mb-4" src="https://i.pravatar.cc/300" alt="User Avatar">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Follow Us</h2>
            <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Join our community and stay updated with the latest deals and offers!</p>
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">
                Follow
            </button>
            <div class="flex items-center justify-between mt-4 w-full">
                <img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=1" alt="Image 1">
                <img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=2" alt="Image 2">
                <img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=3" alt="Image 3">
            </div>
        </div>
    </div>
</div>

3D-Vibrant-Follow-Button

A simple, 3D-inspired follow button component with vibrant colors for business websites. It's responsive and includes dark theme support using only HTML and Tailwind CSS.

Open Preview

                <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md shadow-lg transform transition duration-300 hover:scale-105 active:scale-95 dark:bg-blue-800 dark:hover:bg-blue-900 dark:shadow-xl"> Follow </button>

Material Design Follow Button

A responsive, monochromatic Material Design follow button component for blogs, with dark mode support.

Open Preview

                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-900">Follow</button>

Follow Button Component

A complex, responsive follow button component with glassmorphism style and vibrant colors, designed for business websites with dark mode support using Tailwind CSS.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 px-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800/50 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 backdrop-filter backdrop-blur-lg glass glass-vibrant">
    <div class="flex flex-col items-center">
      <img class="w-24 h-24 rounded-full mb-4 object-cover border-4 border-blue-500 dark:border-teal-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-1">John Doe</h2>
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Senior Developer</p>
      <button class="px-6 py-2 rounded-full bg-gradient-to-r from-blue-500 to-teal-500 text-white font-semibold shadow-lg transform transition duration-300 hover:scale-105 hover:from-blue-600 hover:to-teal-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:focus:ring-teal-400">
        Follow
      </button>
      <div class="flex mt-6 space-x-4 text-gray-700 dark:text-gray-300">
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.524A3 3 0 0010 9a3 3 0 00-2.254.98l-1.524 1.524A8.01 8.01 0 012 10c0-4.411 3.589-8 8-8s8 3.589 8 8z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
          </svg>
          <span>1.2k Followers</span>
        </div>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path d="M11 6a3 3 0 11-6 0 3 3 0 016 0zM14 10a4 4 0 01-8 0H5a6 6 0 0012 0h-1z" />
          </svg>
          <span>250 Following</span>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.glass {
  background-color: rgba(255, 255, 255, 0.2);
}
.dark .glass {
    background-color: rgba(50, 50, 50, 0.2);
}
.glass-vibrant {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
</style>

Glassmorphism Follow Button

Glassmorphism Follow Button Component for Social Media with Dark Theme

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900">
  <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg border border-gray-100 border-opacity-20 dark:bg-gray-700 dark:bg-opacity-10 dark:border-gray-600 dark:border-opacity-20">
    <div class="flex items-center space-x-4">
      <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold text-white dark:text-gray-200">John Doe</h3>
        <p class="text-sm text-gray-200 dark:text-gray-400">@johndoe</p>
      </div>
      <button class="ml-auto px-6 py-2 bg-blue-500 text-white font-semibold rounded-full hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
        Follow
      </button>
    </div>
  </div>
</div>

Follow Button with Microinteractions

Responsive Follow Button Component with dark theme support and microinteractions, designed for social media applications using Tailwind CSS. Features monochromatic color scheme and complex interactive elements.

Open Preview

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative inline-block group">
    <button class="px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full transition-all duration-300 ease-in-out transform group-hover:scale-105 group-active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:group-hover:bg-blue-600 dark:focus:ring-blue-600">
      Follow
    </button>
    <div class="absolute inset-0 rounded-full bg-blue-500 opacity-0 blur transition-all duration-500 ease-in-out group-hover:opacity-70"></div>
  </div>
</div>

Follow Button Component

A Neumorphism styled Follow Button for a dashboard with dark theme support.

Open Preview

                <div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
    <button class="relative inline-flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-full shadow-lg transition-transform transform hover:scale-105 active:scale-95 dark:shadow-inner shadow-gray-300 ">
        <span class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-400 via-red-500 to-yellow-500 opacity-20 blur transition-all duration-500"></span>
        <span class="relative text-white font-bold text-lg">
            Follow
        </span>
    </button>
</div>

Search Components

Categories

Follow Button