CCHub Logo CCHub Tailwind Collection
Komponenten Tasten Buttons-Komponente

Buttons-Komponente

Eine reaktionsschnelle Schaltflächenkomponente mit Unterstützung für den Dunkelmodus, die für den E-Commerce geeignet ist und ein einfaches triadisches Farbschema aufweist.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">

  <!-- Product Card Example with Buttons -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-sm mb-8">
    <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/400/300?random=1" alt="Product Image">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Product Title</h3>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Product description goes here. Short and catchy!.</p>
    <div class="flex items-center justify-between mb-4">
      <span class="text-lg font-bold text-gray-900 dark:text-gray-50">$29.99</span>
      <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$39.99</span>
    </div>
    <div class="flex space-x-4">
      <button class="flex-1 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Add to Cart
      </button>
      <button class="flex-1 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Buy Now
      </button>
    </div>
  </div>

  <!-- Standalone Buttons Section -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-sm">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Other Actions</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        View Details
      </button>
      <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        Add to Wishlist
      </button>
      <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        Contact Seller
      </button>
      <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        Report Issue
      </button>
    </div>
  </div>

</div>

Verwandte Komponenten

3D_Healthcare_Buttons_Component

Eine komplexe, von 3D inspirierte Schaltflächenkomponente für Anwendungen im Gesundheitswesen mit einem monochromen Schwarz-Weiß-Design mit heller Akzentfarbe, reaktionsschnellem Layout und Unterstützung des Dunkelmodus.

Offen

Neumorphismus Social-Media-Schaltflächen

Eine einfache Schaltflächenkomponente im Neumorphism-Stil für Social-Media-Schnittstellen mit responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS. Die Schaltfläche verwendet ein analoges Farbschema und subtile Schatten, um ein weiches, extrudiertes Aussehen zu erzeugen.

Offen

Art Deco Immobilien-Buttons-Komponente

Eine komplexe, vom Art Deco inspirierte Schaltflächenkomponente für Immobilienplattformen mit geometrischen Mustern, luxuriösem Graustufen-Styling und mehreren interaktiven Elementen mit voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen