Search Components

Like/Reaction Buttons

Buttons for expressing reactions to content

Like/Reaction Buttons Component

A responsive Like/Reaction Buttons Component with dark mode support using Tailwind CSS. It features a complementary color scheme suitable for a dashboard, with moderate complexity for interactive reaction buttons.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="dark:bg-gray-800 p-4 rounded-lg shadow-xl">
    <div class="flex space-x-2">
      <!-- Like Button -->
      <button class="flex items-center space-x-1 p-2 rounded-full dark:bg-blue-600 text-white hover:dark:bg-blue-700 transition duration-300">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.857 2.14L18 17v-2.14a2 2 0 00-.857-1.857L14 10zM4 10h4.764a2 2 0 011.857 2.14L8 17v-2.14a2 2 0 00-.857-1.857L4 10zM9 16l-3 3m0 0l-3-3m3 3V4"></path></svg>
        <span>Like</span>
        <span class="dark:text-blue-200">1.2K</span>
      </button>

      <!-- Reactions Dropdown (simplified) -->
      <div class="relative group">
        <button class="flex items-center space-x-1 p-2 rounded-full dark:bg-green-600 text-white hover:dark:bg-green-700 transition duration-300">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m0 0H9m12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>React</span>
        </button>
        <!-- This dropdown would typically be controlled by JavaScript, but for HTML-only, it's always visible on hover for demonstration -->
        <div class="hidden group-hover:block absolute left-0 mt-2 w-48 dark:bg-gray-700 rounded-md shadow-lg py-1 z-10">
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">👍 Like</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">❤️ Love</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😂 Laugh</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😮 Wow</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😢 Sad</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😡 Angry</a>
        </div>
      </div>
    </div>
  </div>
</div>

Like/Reaction Buttons

Like/Reaction Buttons Component with Brutalism design, earth tones, complex interactions, responsive, dark theme support.. No JS, pure HTML with Tailwind.

Open Preview

                <div class="bg-stone-100 dark:bg-stone-900 p-8 min-h-screen flex items-center justify-center">
  <div class="bg-stone-200 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,0.5)] max-w-md w-full">
    <hさんがclass="text-2xl font-bold text-stone-900 dark:text-stone-100 mb-6 font-mono">React to this postさんが</h2>
    
    <div class="flex flex-wrap gap-4 justify-center">
      
      <!-- Like Button -->
      <button class="flex items-center space-x-2 bg-green-700 hover:bg-green-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="Mさんが14 10h4.764a2 2 0 011.803 1.138l3.095 7.738A2 2 0 0122が 2さんがh-3V7a3 3 0 00-3-3H4a2 2 0 00-2 2v10a2 2 0 002 2h12M9 20h9さんの</path>
        </svg>
        <span>Like</span>
      </button>

      <!-- Love Button -->
      <button class="flex items-center space-x-2 bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M20.84 4. さんが12a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.さんが23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
        </svg>
        <span>Loveさんが</span>
      </button>

      <!-- Laugh Button -->
      <button class="flex items-center space-x-2 bg-yellow-700 hover:bg-yellow-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="Mさんがさんと7h.01Mさんが2 7h.01Mさんの5 7h.01M21 12a9 9 0 さんの9 0 01-18 0z"></path>
        </svg>
        <span>Laughさん</span>
      </button>

      <!--さんが Angry Button -->
      <button class="flex items-さんenter space-x-2 bg-red-900 hover:bg-red-950 text-white font-bold py-さんとpx-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linearさんも">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんがbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="さんMさんが.732 14.597a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.353-2.935a4.8 4.8 0 00-3.002-2.53m-1.067.895a5.003 5.003 0 01-1.5.242m1.067-.895a5.003 5.003 0 00-1.5.242m0 0.895a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.353-2.935a4.8 4.8 0 00-3.002-2.53"></path>
        </svg>
        <span>Angry</span>
      </button>
      
      <!--さんの Sad Button -->
      <button class="flex items-center space-x-2 bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="さんMさんが.732 14.597a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.353-2.935a4.8 4.8 0 00-3.002-2.53m-1.067.895a5.003 5.003 0 01-1.5.242m1.067-.895a5.003 5.003 0 00-1.5.242m0 0.895a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.353-2.935a4.8 4.8 0 00-3.002-2.53"></path>
        </svg>
        <span>Sad</span>
      </button>

      <!--さんが Wow Button -->
      <button class="flex items-さんenter space-x-2 bg-orange-700 hover:bg-orange-800 text-white font-bold py-さんとpx-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linearさんが">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="さんがM-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-さんと0.84 4.さんが12a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.さんが23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
        </svg>
        <span>Wow</span>
      </button>
    
さんが </div>
  </div>
さん</div>

Like/Reaction Buttons

Like/Reaction Buttons Component with Retro/Vintage design

Open Preview

                <div class="flex items-center justify-center space-x-4 p-4 bg-gray-200 dark:bg-gray-800">
  <button class="flex items-center space-x-2 px-3 py-1 rounded-full bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition duration-300 ease-in-out">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
    </svg>
    <span>Like</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 rounded-full bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition duration-300 ease-in-out">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path d="M10 2a6 6 0 00-6 6v3.586l1.707 1.707A3 3 0 017 14h6a3 3 0 012.293.707L16 11.586V8a6 6 0 00-6-6zM12 15.5a1 1 0 100 2h-4a1 1 0 100 2H7a1 1 0 100 2h6a3 3 0 003-3v-6a3 3 0 00-3-3h-2l-.45.45A4 4 0 0111 14H9a4 4 0 01-1.55-.45L7 13V8a4 4 0 014-4h2a4 4 0 014 4v6a4 4 0 01-4 4h-6.5a1.5 1.5 0 00-1.06.44L4 17.5V15a1 1 0 00-1-1h-.5a1.5 1.5 0 000 3H3v.5a1.5 1.5 0 001.5 1.5h8.086a2.5 2.5 0 011.768.732L15 20.5V21h1a1 1 0 100-2h-1v-.5a1.5 1.5 0 00-1.5-1.5z" />
    </svg>
    <span>React</span>
  </button>

</div>

Skeuomorphic Like/Reaction Buttons Component

A complex, responsive, dark-theme enabled Skeuomorphic Like/Reaction Buttons Component using a Monochromatic color scheme for E-commerce.

Open Preview

                <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-4">
  <div class="flex items-center space-x-4">
    <!-- Like Button -->
    <button class="flex items-center justify-center px-4 py-2 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1">
      <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
      <span>Like</span>
      <span class="ml-1 text-sm">(1.2k)</span>
    </button>

    <!-- Reaction Buttons Dropdown (Skeuomorphic Pop-up) -->
    <div class="relative group">
      <button class="flex items-center justify-center px-4 py-2 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 shadow-lg hover:shadow-xl focus:outline-none transition duration-300 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
      </button>
      <div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 w-64 p-4 rounded-xl shadow-2xl bg-gray-300 dark:bg-gray-700 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition duration-300 ease-in-out invisible group-hover:visible group-focus-within:visible scale-95 group-hover:scale-100 origin-bottom skeuomorphic-popup">
        <div class="grid grid-cols-4 gap-2">
          <!-- Sample Reactions (replace with actual icons/images) -->
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">👍</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">❤️</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😂</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😮</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😢</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😡</span>
          </button>
          </div>
      </div>
    </div>
  </div>
</div>

<style>
.skeuomorphic-popup {
  /* Basic Skeuomorphic effect using box-shadow for depth and highlights */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(255,255,255,0.5), 0 5px 15px rgba(0,0,0,0.3);
}

.dark .skeuomorphic-popup {
   box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(70,70,70,0.3), 0 5px 15px rgba(0,0,0,0.5);
}
</style>

NeumorphismLikeReactionButtons

Responsive Like/Reaction Buttons Component for blog/content with dark theme support and Neumorphism design.

Open Preview

                <div class="flex items-center justify-center p-4 dark:bg-gray-900">
  <div class="flex space-x-4">
    <!-- Like Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.808 2.808l-7.922 10.604a3 3 0 01-5.371 0L2.428 12.81a2 2 0 011.808-2.808H9M4 5h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1z"></path></svg>
      <span>Like</span>
    </button>
    <!-- Celebrate Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18v-9"></path></svg>
      <span>Celebrate</span>
    </button>
    <!-- Insightful Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m-.707 6.364l-.707-.707M12 20h1m-6.364-1.636l-.707.707M3 12H4m-.707-6.364l.707-.707M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m3 0h5M9 7h12a2 2 0 012 2v5a2 2 0 01-2 2H9m0-9v9m4-9v.01"></path></svg>
      <span>Insightful</span>
    </button>
  </div>
</div>

<style>
.shadow-neumorphic-light {
  box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-dark {
  box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #333333;
}
</style>

Like/Reaction Buttons Component

A complex Like/Reaction Buttons Component with microinteractions, analogous color scheme, responsive design, and dark theme support, suitable for a dashboard. Uses Tailwind CSS and includes multiple interactive elements with engaging animations.

Open Preview

                <div class="flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4 min-h-screen">
  <div class="flex space-x-2">
    <!-- Primary Like Button -->
    <button class="flex items-center space-x-1 px-4 py-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transform transition-transform duration-200 hover:scale-105 focus:outline-none dark:bg-blue-700 dark:hover:bg-blue-800">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.667a2 2 0 002 2h2.983a2 2 0 001.828-1.154l3.913-7K11 2.167v1.833A2.5 2.5 0 008.5 6H5a2 2 0 00-2 2v2.333L6 10.333z"></path>
      </svg>
      <span>Like</span>
      <span class="text-sm">123</span>
    </button>


    <!-- Reaction Buttons - Example using emojis -->
    <div class="relative group">
      <button class="flex items-center space-x-1 px-4 py-2 rounded-full bg-green-500 text-white hover:bg-green-600 transform transition-transform duration-200 hover:scale-105 focus:outline-none dark:bg-green-700 dark:hover:bg-green-800">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile">
          <circle cx="12" cy="12" r="10"></circle>
          <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
          <line x1="9" y1="9" x2="9.01" y2="9"></line>
          <line x1="15" y1="9" x2="15.01" y2="9"></line>
        </svg>
        <span>React</span>
      </button>
      

      <!-- Reaction Options (Hidden by default, shown on hover) -->
      <div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 flex space-x-1 bg-white dark:bg-gray-800 p-2 rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10">
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">👍</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">❤️</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😆</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😮</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😢</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😡</button>
      </div>
    </div>

  </div>
</div>

Like/Reaction Buttons Component

A Neumorphism styled Like/Reaction buttons component for blogs with a complex design and dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">React to this Post</h2>
    <div class="grid grid-cols-3 gap-4">
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50" alt="Like" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Like</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=1" alt="Love" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Love</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=2" alt="Haha" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Haha</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=3" alt="Wow" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Wow</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=4" alt="Sad" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Sad</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=5" alt="Angry" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Angry</span>
        </button>
    </div>
</div>

Like/Reaction Buttons Component

A retro/vintage Like/Reaction buttons component designed for corporate websites, featuring earth tones and responsive design with dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-brown-800 dark:text-brown-300 mb-4">
        Share Your Reaction!
    </h2>
    <div class="flex space-x-4">
        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1005/50/50" alt="Like" class="mb-1 rounded-full" />
            <span>👍 Like</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1006/50/50" alt="Love" class="mb-1 rounded-full" />
            <span>❤️ Love</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1007/50/50" alt="Haha" class="mb-1 rounded-full" />
            <span>😂 Haha</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1008/50/50" alt="Wow" class="mb-1 rounded-full" />
            <span>😮 Wow</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1009/50/50" alt="Sad" class="mb-1 rounded-full" />
            <span>😢 Sad</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1010/50/50" alt="Angry" class="mb-1 rounded-full" />
            <span>😠 Angry</span>
        </button>
    </div>
</div>

Like/Reaction Buttons Component

A responsive Like/Reaction buttons component designed with microinteractions in mind, using a monochromatic color scheme, suitable for blog and content consumption, with support for dark themes.

Open Preview

                <div class="flex flex-col items-center p-4 space-y-4 bg-gray-200 dark:bg-gray-800 rounded-md shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Engage with this post!</h2>
    <div class="flex space-x-4">
        <button class="relative group p-2 rounded-full text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Like" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Like</span>
        </button>
        <button class="relative group p-2 rounded-full text-green-600 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Love" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Love</span>
        </button>
        <button class="relative group p-2 rounded-full text-red-600 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Angry" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Angry</span>
        </button>
    </div>
    <p class="text-sm text-gray-600 dark:text-gray-400">Your reactions help us improve!</p>
</div>

Like/Reaction Buttons

Like/Reaction Buttons Component with Microinteractions, Complementary color scheme, Simple complexity, for Social Media purpose.

Open Preview

                <div class="flex items-center justify-center space-x-4">
  <!-- Light mode: Like button -->
  <button class="flex items-center space-x-1 text-blue-600 dark:text-blue-400 focus:outline-none">
    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.381 0-.74-.15-.988-.427l-2.593-3.017A1.5 1.5 0 016 15.25V10H4a2 2 0 00-2 2v5a2 2 0 002 2h2.598a2 2 0 011.665.879l1.212 1.5A2 2 0 0010 21h.828c.317 0 .609-.117.856-.309l3.975-3.854A2 2 0 0118.113 15H22V4a2 2 0 00-2-2h-6a2 2 0 00-2 2v6zM14 10V4h-4v6m0 0H9m5 0a2 2 0 110 4m0-4a2 2 0 100 4m0 0c1.272 0 2.424.41 3.374 1.184C16.168 10.69 17 8.56 17 6.5 17 4.56 16.168 2.43 14.816 1.184A2 2 0 0014 2z"/>
    </svg>
    <span>Like</span>
  </button>

  <!-- Dark mode: Like button -->
  <button class="flex items-center space-x-1 text-gray-400 dark:text-gray-600 dark:hover:text-blue-400 focus:outline-none">
    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.381 0-.74-.15-.988-.427l-2.593-3.017A1.5 1.5 0 016 15.25V10H4a2 2 0 00-2 2v5a2 2 0 002 2h2.598a2 2 0 011.665.879l1.212 1.5A2 2 0 0010 21h.828c.317 0 .609-.117.856-.309l3.975-3.854A2 2 0 0118.113 15H22V4a2 2 0 00-2-2h-6a2 2 0 00-2 2v6zM14 10V4h-4v6m0 0H9m5 0a2 2 0 110 4m0-4a2 2 0 100 4m0 0c1.272 0 2.424.41 3.374 1.184C16.168 10.69 17 8.56 17 6.5 17 4.56 16.168 2.43 14.816 1.184A2 2 0 0014 2z"/>
    </svg>
    <span>Like</span>
  </button>

  <button class="flex items-center space-x-1 text-red-600 dark:text-red-400 focus:outline-none">
    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
    </svg>
    <span>Love</span>
  </button>
</div>

Search Components

Categories

Like/Reaction Buttons