Pulsanti

Componente Pulsanti

Pulsanti in stile Material Design con una combinazione di colori in scala di grigi per scopi di portfolio, con design reattivo con supporto per temi scuri.

Apri anteprima

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

Componente Pulsanti

Un semplice componente di pulsanti in stile Material Design, che utilizza una combinazione di colori monocromatica e supporta la modalità scura, adatto per siti Web aziendali/aziendali.

Apri anteprima

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

Componente Pulsanti

Componente pulsanti di neumorfismo con combinazione di colori monocromatica per scopi di portfolio, reattivo con supporto per temi scuri.

Apri anteprima

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

Componente Pulsanti Glassmorphism

Un componente pulsante Glassmorphism semplice e reattivo con colori pastello e supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

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

Componente Pulsanti

Un componente di pulsanti reattivi con supporto della modalità oscura per i portfolio. Presenta un design piatto minimalista in scala di grigi con complessità moderata.

Apri anteprima

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

Neumorfismo Pulsanti dei social media

Un semplice componente pulsante in stile neumorfismo per le interfacce dei social media, caratterizzato da un design reattivo e dal supporto della modalità oscura utilizzando Tailwind CSS. Il pulsante utilizza una combinazione di colori analoga e ombre sottili per creare un aspetto morbido ed estruso.

Apri anteprima

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

Componente Pulsanti Glassmorphism

Glassmorphism Buttons che utilizza i toni della terra per un sito di portfolio reattivo con modalità scura

Apri anteprima

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

Componente dei pulsanti di progettazione dei materiali

Componente dei pulsanti di Material Design nei toni della terra per i social media

Apri anteprima

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

Componente Pulsanti

Un componente di pulsanti minimalista progettato per un portfolio che mostra lavori o prodotti, caratterizzato da colori vivaci e design reattivo con supporto per temi scuri utilizzando Tailwind CSS.

Apri anteprima

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

Componente Pulsanti

Skeuomorphism Analogous Complex Dashboard Buttons Component con design reattivo e supporto per temi scuri.

Apri anteprima

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

Categorie