Komponenten suchen

Kategorien

Tasten

Interaktive Elemente, die Aktionen auslösen

Komponente "Brutalismus-Knöpfe"

Eine Schaltflächenkomponente mit einem brutalistischen Design mit Farben mit hoher Sättigung, responsivem Layout und Unterstützung für den Dunkelmodus, die für Geschäfts- und Unternehmenswebsites geeignet ist.

Offen Vorschau

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-900">
    <h1 class="text-4xl font-bold text-purple-600 dark:text-purple-400 mb-6">Choose Your Action</h1>
    <div class="flex space-x-4">
        <button class="px-6 py-3 font-semibold text-white bg-red-600 border-2 border-red-800 rounded-lg shadow-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-red-800 dark:border-red-900 dark:hover:bg-red-700 dark:focus:ring-red-600">
            Primary Action
        </button>
        <button class="px-6 py-3 font-semibold text-white bg-blue-600 border-2 border-blue-800 rounded-lg shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-800 dark:border-blue-900 dark:hover:bg-blue-700 dark:focus:ring-blue-600">
            Secondary Action
        </button>
    </div>
    <div class="flex space-x-4 mt-6">
        <button class="px-6 py-3 text-gray-800 bg-yellow-400 border-2 border-yellow-600 rounded-lg shadow-lg hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:bg-yellow-600 dark:border-yellow-800 dark:text-white dark:hover:bg-yellow-500 dark:focus:ring-yellow-400">
            Tertiary Action
        </button>
        <button class="px-6 py-3 text-white bg-green-500 border-2 border-green-700 rounded-lg shadow-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-green-700 dark:border-green-800 dark:hover:bg-green-600 dark:focus:ring-green-400">
            Another Action
        </button>
    </div>
    <div class="mt-6 text-center">
        <img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded-md shadow-lg">
        <div class="flex items-center justify-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/81.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md">
            <p class="ml-2 text-lg text-gray-700 dark:text-gray-300">John Doe</p>
        </div>
    </div>
</div>

Buttons-Komponente

Offen Vorschau

                <div class="flex flex-wrap gap-4 p-4 bg-gray-100 dark:bg-gray-900">

  <!-- Primary Button -->
  <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    Primary Button
  </button>

  <!-- Secondary Button -->
  <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
    Secondary Button
  </button>

  <!-- Success Button -->
  <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-green-700 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
    Success Button
  </button>

  <!-- Danger Button -->
  <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
    Danger Button
  </button>

  <!-- Outline Button -->
  <button class="bg-transparent hover:bg-blue-200 text-blue-700 font-semibold py-3 px-6 border border-blue-600 rounded-lg shadow-md transition duration-300 ease-in-out dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    Outline Button
  </button>

  <!-- Disabled Button -->
  <button class="bg-gray-300 text-gray-600 font-bold py-3 px-6 rounded-lg cursor-not-allowed shadow-md dark:bg-gray-700 dark:text-gray-500" disabled>
    Disabled Button
  </button>

</div>

Buttons-Komponente

Eine Schaltflächen-Komponente, die im Material Design-Stil mit einem pastellfarbenen Farbschema gestaltet wurde, für Geschäfts-/Unternehmenswebsites geeignet ist und dunkle Themen unterstützt.

Offen Vorschau

                <div class="flex flex-col space-y-4 p-4 max-w-md mx-auto">
    <!-- Primary Button -->
    <button class="bg-blue-400 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
        Primary Button
    </button>
    
    <!-- Secondary Button -->
    <button class="bg-green-400 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-green-600 dark:hover:bg-green-700">
        Secondary Button
    </button>
    
    <!-- Disabled Button -->
    <button class="bg-gray-300 text-gray-500 font-semibold py-2 px-4 rounded shadow-md cursor-not-allowed transition-opacity opacity-70 dark:bg-gray-700 dark:text-gray-400">
        Disabled Button
    </button>
    
    <!-- Outline Button -->
    <button class="border-2 border-blue-400 text-blue-400 font-semibold py-2 px-4 rounded hover:bg-blue-400 hover:text-white transition-colors dark:border-blue-600 dark:text-blue-600 dark:hover:bg-blue-600 dark:hover:text-white">
        Outline Button
    </button>
    
    <!-- Icon Button -->
    <button class="flex items-center bg-yellow-400 hover:bg-yellow-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-yellow-600 dark:hover:bg-yellow-700">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Icon" class="w-5 h-5 mr-2 rounded-full">
        Icon Button
    </button>
</div>

Buttons-Komponente

Responsive Buttons-Komponente mit Unterstützung für Materialdesign, triadisches Farbschema und dunkles Design.

Offen Vorschau

                <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-gray-800">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-blue-700 dark:hover:bg-blue-900 transition duration-300 ease-in-out">Primary Button</button>
  <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-green-700 dark:hover:bg-green-900 transition duration-300 ease-in-out">Secondary Button</button>
  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out">Danger Button</button>
  <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-yellow-700 dark:hover:bg-yellow-900 transition duration-300 ease-in-out">Warning Button</button>
  <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-purple-700 dark:hover:bg-purple-900 transition duration-300 ease-in-out">Info Button</button>
  <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-gray-700 dark:hover:bg-gray-900 transition duration-300 ease-in-out">Neutral Button</button>
</div>

Buttons-Komponente

Eine Schaltflächenkomponente im 3D-Stil, die für ein Portfolio mit einem analogen Farbschema und Unterstützung des Dunkelmodus geeignet ist.

Offen Vorschau

                <div class="flex flex-col items-center justify-center mt-10 space-y-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Showcase Your Work</h2>
    <div class="flex space-x-4">
        <a href="#" class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Portfolio</a>
        <a href="#" class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Products</a>
        <a href="#" class="bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Contact</a>
    </div>
</div>

<div class="flex flex-col items-center justify-center mt-10 space-y-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Our Team</h2>
    <div class="flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
        <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
    </div>
</div>

<div class="flex flex-col items-center justify-center mt-10 space-y-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Portfolio Preview</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <img src="https://picsum.photos/id/1011/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
        <img src="https://picsum.photos/id/1012/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
        <img src="https://picsum.photos/id/1013/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
    </div>
</div>

Buttons-Komponente

Material Design-gestaltete Schaltflächen mit einem Graustufen-Farbschema für Portfoliozwecke, mit responsivem Design und Unterstützung für dunkle Themen.

Offen Vorschau

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <h1 class="mb-8 text-3xl font-bold text-gray-800 dark:text-gray-200">Portfolio Showcase</h1>
  <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
    <div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/300/200" alt="Project 1" class="w-full h-48 object-cover rounded-md mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 1</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 1 goes here.</p>
      <a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
    </div>
    <div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/300/201" alt="Project 2" class="w-full h-48 object-cover rounded-md mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 2</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 2 goes here.</p>
      <a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
    </div>
    <div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/300/202" alt="Project 3" class="w-full h-48 object-cover rounded-md mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 3</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 3 goes here.</p>
      <a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
    </div>
  </div>
</div>

Buttons-Komponente

Eine einfache Schaltflächenkomponente, die mit Material Design gestaltet wurde, ein monochromatisches Farbschema verwendet und den Dunkelmodus unterstützt, geeignet für Geschäfts-/Unternehmenswebsites.

Offen Vorschau

                <div class="flex flex-col items-center space-y-4 p-6 bg-gray-100 dark:bg-gray-800">
    <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Buttons Component</h2>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Primary Button</button>
        <button class="px-6 py-2 rounded border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-800 dark:text-blue-200 dark:hover:bg-blue-800 dark:hover:text-white">Secondary Button</button>
    </div>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-gray-300 text-gray-800 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">Tertiary Button</button>
        <button class="px-6 py-2 rounded bg-transparent border border-gray-300 text-gray-800 hover:bg-gray-300 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700">Outlined Button</button>
    </div>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Large Button</button>
        <button class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Medium Button</button>
        <button class="px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Small Button</button>
    </div>
</div>

Buttons-Komponente

Neumorphism Buttons-Komponente mit monochromatischem Farbschema für Portfolio-Zwecke, reaktionsschnell mit Unterstützung für dunkle Themen.

Offen Vorschau

                <section class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-4">
    <button class="px-6 py-3 text-gray-700 duration-300 ease-in-out bg-gray-300 rounded-full shadow-neumorphic dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-dark hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">Primary Button</button>
    <button class="px-6 py-3 text-gray-700 duration-300 ease-in-out bg-gray-300 rounded-full shadow-neumorphic dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-dark hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">Secondary Button</button>
  </div>

  <style>
    .shadow-neumorphic {
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 7px 7px 15px #4b5563, -7px -7px 15px #374151;
    }
    .hover\:shadow-neumorphic-hover:hover {
      box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
    }
     .dark .hover\:shadow-neumorphic-dark-hover:hover {
      box-shadow: inset 5px 5px 10px #4b5563, inset -5px -5px 10px #374151;
    }
  </style>

</section>

Glassmorphism Buttons-Komponente

Eine einfache, reaktionsschnelle Glassmorphism-Schaltflächenkomponente mit Pastellfarben und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Offen Vorschau

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-4">
    <button class="px-6 py-3 text-lg font-semibold text-white bg-pink-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-pink-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 1
    </button>
    <button class="px-6 py-3 text-lg font-semibold text-white bg-blue-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-blue-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 2
    </button>
  </div>
</div>

Buttons-Komponente

Eine reaktionsschnelle Schaltflächenkomponente mit Unterstützung für den Dunkelmodus für Portfolios. Verfügt über ein minimalistisches, flaches Design in Graustufen mit moderater Komplexität.

Offen Vorschau

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

  <!-- Primary Button -->
  <button class="px-6 py-3 text-lg font-semibold text-white bg-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
    Primary Action
  </button>

  <!-- Secondary Button -->
  <button class="px-6 py-3 text-lg font-semibold text-gray-800 bg-transparent border-2 border-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
    Secondary Action
  </button>

  <!-- Tertiary Button (Icon only example) -->
  <button class="flex items-center justify-center w-12 h-12 text-gray-800 bg-transparent border-2 border-gray-800 rounded-full shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
    </svg>
  </button>

  <!-- Responsive Example (adjusts layout on larger screens) -->
  <div class="flex flex-col md:flex-row items-center justify-center gap-4 w-full">
    <button class="w-full md:w-auto px-6 py-3 text-lg font-semibold text-white bg-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
      Responsive Button 1
    </button>
    <button class="w-full md:w-auto px-6 py-3 text-lg font-semibold text-gray-800 bg-transparent border-2 border-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
      Responsive Button 2
    </button>
  </div>

</div>