Komponenten Like-/Reaction-Schaltflächen NeumorphismLikeReactionButtons

NeumorphismLikeReactionButtons

Responsive Like/Reaction Buttons Komponente für Blog/Inhalte mit Unterstützung für dunkle Themen und Neumorphism-Design.

Vorschau

HTML-Code

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

Verwandte Komponenten

Komponente "Gefällt mir/Reaktions-Buttons"

Like/Reaction Buttons Komponente, die in HTML mit Tailwind CSS codiert ist, mit einem Brutalismus-Design, einem Farbschema in Erdtönen und moderater Komplexität, geeignet für E-Commerce. Beinhaltet Unterstützung für responsives Design und Dunkelmodus.

Offen

Komponente "Gefällt mir/Reaktions-Buttons"

Eine Webkomponente mit Like- und Reaction-Schaltflächen, die in einem skeuomorphen Stil gestaltet sind, mit responsiven Effekten und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS.

Offen

Komponente "Gefällt mir/Reaktions-Buttons"

Eine reaktionsschnelle Like/Reaction Buttons-Komponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Es verfügt über ein komplementäres Farbschema, das für ein Dashboard geeignet ist, mit moderater Komplexität für interaktive Reaktionsschaltflächen.

Offen