Composants Boutons J’aime/Réaction Boutons neumorphes Like/Reaction

Boutons neumorphes Like/Reaction

Un ensemble simple et réactif de boutons J’aime/Réaction avec un style de conception neumorphique, une palette de couleurs de bijou et une prise en charge du mode sombre, adapté aux interfaces finance/banque.

Aperçu

HTML Code

<div class="flex items-center justify-center min-h-screen bg-emerald-50 dark:bg-emerald-950 p-4 font-sans">
  <div class="flex space-x-4 p-4 rounded-3xl shadow-xl dark:shadow-2xl bg-emerald-100 dark:bg-emerald-900
              shadow-emerald-200/80 dark:shadow-emerald-900/80
              dark:shadow-inner-xl dark:shadow-emerald-800/80">

    <!-- Like Button -->
    <button class="flex items-center justify-center w-12 h-12 rounded-full 
                   bg-emerald-100 dark:bg-emerald-900 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   text-emerald-700 dark:text-emerald-300 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
                   transition-all duration-300 ease-in-out">
      <svg class="w-6 h-6" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
      </svg>
    </button>

    <!-- Thumbs Up Button -->
    <button class="flex items-center justify-center w-12 h-12 rounded-full 
                   bg-emerald-100 dark:bg-emerald-900 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   text-emerald-700 dark:text-emerald-300 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
                   transition-all duration-300 ease-in-out">
      <svg class="w-6 h-6" 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 10V9m0-1a7 7 0 00-14 0v1m14 0a7 7 0 0114 0v1m-7 8c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zM4 16h-.01M7 16h.01M10 16h.01M13 16h.01M16 16h.01M19 16h.01M22 16h.01"></path>
      </svg>
    </button>

    <!-- Thumbs Down Button -->
    <button class="flex items-center justify-center w-12 h-12 rounded-full 
                   bg-emerald-100 dark:bg-emerald-900 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   text-emerald-700 dark:text-emerald-300 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
                   transition-all duration-300 ease-in-out">
      <svg class="w-6 h-6 transform rotate-180" 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 10V9m0-1a7 7 0 00-14 0v1m14 0a7 7 0 0114 0v1m-7 8c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zM4 16h-.01M7 16h.01M10 16h.01M13 16h.01M16 16h.01M19 16h.01M22 16h.01"></path>
      </svg>
    </button>

  </div>
</div>

<style>
  /* Neumorphic Shadows (Tailwind custom values) */
  /* Light Mode */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #98d8be, -6px -6px 12px #c9fff2;
  }
  .hover\:shadow-neumorphic-inset-light:hover {
    box-shadow: inset 4px 4px 8px #98d8be, inset -4px -4px 8px #c9fff2;
  }

  /* Dark Mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #0a3d2e, -6px -6px 12px #33a77a;
  }
  .dark .hover\:shadow-neumorphic-inset-dark:hover {
    box-shadow: inset 4px 4px 8px #0a3d2e, inset -4px -4px 8px #33a77a;
  }

  /* General neumorphic base for the container */
  .shadow-xl {
    box-shadow: 10px 10px 20px rgba(0,0,0,0.1), -10px -10px 20px rgba(255,255,255,1); /* Light mode base */
  }
  .dark .shadow-2xl {
    box-shadow: 10px 10px 20px rgba(0,0,0,0.5), -10px -10px 20px rgba(45,45,45,1); /* Dark mode base */
  }

  /* Specific overrides for the emerald background */
  .shadow-emerald-200\/80 {
    box-shadow: 10px 10px 20px rgba(181, 237, 212, 0.8), -10px -10px 20px rgba(239, 255, 247, 1);
  }
  .dark .shadow-emerald-900\/80 {
    box-shadow: 10px 10px 20px rgba(18, 59, 45, 0.8), -10px -10px 20px rgba(41, 107, 81, 1);
  }

  /* Inner shadow for the main container (more pronounced in dark mode) */
  .dark .shadow-inner-xl {
    box-shadow: inset 5px 5px 10px #0a3d2e, inset -5px -5px 10px #33a77a;
  }
</style>

Composants associés

Composant Like/Reaction Buttons

Composant codé en HTML avec Tailwind CSS, avec un design brutal, une palette de couleurs Earth tones et une complexité modérée, adapté au commerce électronique. Comprend la conception réactive et la prise en charge du mode sombre.

Ouvrir

Boutons J’aime/Réaction

Composant de boutons J’aime/Réaction avec design brutal, tons de terre, interactions complexes, réactif, prise en charge du thème sombre. Pas de JS, du HTML pur avec Tailwind.

Ouvrir

Boutons J’aime/Réaction

Composant Like/Reaction Buttons avec prise en charge des micro-interactions, de la réactivité et du thème sombre

Ouvrir