Tasten

Buttons-Komponente

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

Vorschau öffnen

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

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.

Vorschau öffnen

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

Vorschau öffnen

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

Vorschau öffnen

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

Vorschau öffnen

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

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.

Vorschau öffnen

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-800">
  <button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover">
    Like
  </button>
  <button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover">
    Share
  </button>
  <button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover-analogous dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover-analogous">
    Comment
  </button>
</div>

<style>
@media (prefers-color-scheme: light) {
  .shadow-neumorphism-light {
    box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
  }
  .hover\:shadow-neumorphism-light-hover:hover {
    box-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffffff;
  }
    .hover\:shadow-neumorphism-light-hover-analogous:hover {
    box-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffeead;
  }
}

@media (prefers-color-scheme: dark) {
  .shadow-neumorphism-dark {
    box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #363636;
  }
  .hover\:shadow-neumorphism-dark-hover:hover {
    box-shadow: 2px 2px 5px #4a4a4a, -2px -2px 5px #363636;
  }
    .hover\:shadow-neumorphism-dark-hover-analogous:hover {
    box-shadow: 2px 2px 5px #4a4a4a, -2px -2px 5px #808000;
  }
}
</style>

Glassmorphism Buttons-Komponente

Glassmorphism-Schaltflächen mit Erdtönen für eine reaktionsschnelle Portfolio-Website mit dunklem Modus

Vorschau öffnen

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism Earth Tone Buttons</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .glass {
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px); /* Safari support */
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .dark .glass {
            background-color: rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body class="bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center p-8">

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

        <!-- Button 1: Primary Action -->
        <button class="glass text-stone-800 dark:text-stone-200 font-bold py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
            Explore Projects
        </button>

        <!-- Button 2: Secondary Action -->
        <button class="glass text-stone-700 dark:text-stone-300 font-semibold py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
            Download CV
        </button>

        <!-- Button 3: Contact -->
        <button class="glass text-stone-600 dark:text-stone-400 font-normal py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-300 focus:ring-opacity-50">
            Get in Touch
        </button>

        <!-- Button 4: View Details (Example with Icon) -->
        <button class="glass text-stone-800 dark:text-stone-200 font-bold py-4 px-8 rounded-lg shadow-lg transform transition duration-300 flex items-center justify-center hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            More Info
        </button>

         <!-- Button 5: Learn More -->
        <button class="glass text-stone-700 dark:text-stone-300 font-semibold py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
            Learn More About Me
        </button>

        <!-- Button 6: Hire Me -->
        <button class="glass text-stone-600 dark:text-stone-400 font-normal py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-300 focus:ring-opacity-50">
            Hire Me
        </button>

    </div>

</body>
</html>

Komponente "Material Design-Schaltflächen"

Material Design Buttons Komponente in Erdtönen für Social Media

Vorschau öffnen

                ```html
<div class="flex flex-col items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="flex space-x-4 rtl:space-x-reverse">
    <button class="px-4 py-2 bg-amber-600 text-white dark:bg-amber-700 dark:text-stone-200 rounded-md shadow-md hover:bg-amber-700 dark:hover:bg-amber-800 transition duration-300 ease-in-out">Like</button>
    <button class="px-4 py-2 bg-stone-400 text-stone-800 dark:bg-stone-600 dark:text-stone-200 rounded-md shadow-md hover:bg-stone-500 dark:hover:bg-stone-700 transition duration-300 ease-in-out">Comment</button>
    <button class="px-4 py-2 bg-green-600 text-white dark:bg-green-700 dark:text-stone-200 rounded-md shadow-md hover:bg-green-700 dark:hover:bg-green-800 transition duration-300 ease-in-out">Share</button>
  </div>
</div>
```

Buttons-Komponente

Eine minimalistische Schaltflächenkomponente, die für ein Portfolio entwickelt wurde, in dem Arbeiten oder Produkte vorgestellt werden, mit leuchtenden Farben und responsivem Design mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Vorschau öffnen

                <div class="flex flex-col items-center justify-center h-screen bg-white dark:bg-gray-900 p-4">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Portfolio Buttons</h1>
    <div class="space-y-4">
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 text-lg font-medium text-white bg-red-500 rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-200">View Projects</a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 text-lg font-medium text-white bg-green-500 rounded hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 transition duration-200">Contact Me</a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 text-lg font-medium text-white bg-blue-500 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-200">Download CV</a>
    </div>
</div>

Buttons-Komponente

Skeuomorphism Analogous Complex Dashboard Buttons Component mit responsivem Design und Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="flex flex-wrap justify-center items-center p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-xl">
  <!-- Primary Button -->
  <button class="m-4 px-8 py-4 bg-gradient-to-br from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white text-lg font-bold transform transition-transform duration-200 hover:scale-105">
    Dashboard
  </button>

  <!-- Secondary Button -->
  <button class="m-4 px-8 py-4 bg-gradient-to-br from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white text-lg font-bold transform transition-transform duration-200 hover:scale-105">
    Reports
  </button>

  <!-- Tertiary Button -->
  <button class="m-4 px-8 py-4 bg-gradient-to-br from-yellow-500 to-yellow-700 hover:from-yellow-600 hover:to-yellow-800 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-800 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white text-lg font-bold transform transition-transform duration-200 hover:scale-105">
    Analytics
  </button>

  <!-- Disabled Button -->
  <button class="m-4 px-8 py-4 bg-gray-400 dark:bg-gray-600 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-gray-200 dark:text-gray-400 text-lg font-bold cursor-not-allowed">
    Settings
  </button>

  <!-- Icon Button -->
  <button class="m-4 p-4 bg-gradient-to-br from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 rounded-full shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white transform transition-transform duration-200 hover:scale-105">
    <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="M12 4v16m8-8H4"></path></svg>
  </button>
</div>

Kategorien