Pulsante Segui

Componente pulsante Segui

Un complesso componente del pulsante follow progettato con un effetto glassmorphism, utilizzando una combinazione di colori complementari, adatto per applicazioni di e-commerce, caratterizzato da un design reattivo e dal supporto del tema scuro.

Apri anteprima

                <div class="flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white bg-opacity-30 backdrop-blur-lg border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-6 w-80">
        <div class="flex flex-col items-center">
            <img class="rounded-full w-16 h-16 mb-4" src="https://i.pravatar.cc/300" alt="User Avatar">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Follow Us</h2>
            <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Join our community and stay updated with the latest deals and offers!</p>
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">
                Follow
            </button>
            <div class="flex items-center justify-between mt-4 w-full">
                <img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=1" alt="Image 1">
                <img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=2" alt="Image 2">
                <img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=3" alt="Image 3">
            </div>
        </div>
    </div>
</div>

Pulsante di follow-follow vibrante 3D

Un semplice componente del pulsante Segui ispirato al 3D con colori vivaci per i siti Web aziendali. È reattivo e include il supporto per il tema scuro utilizzando solo HTML e Tailwind CSS.

Apri anteprima

                <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md shadow-lg transform transition duration-300 hover:scale-105 active:scale-95 dark:bg-blue-800 dark:hover:bg-blue-900 dark:shadow-xl"> Follow </button>

Pulsante Segui design materiale

Un componente reattivo e monocromatico Material Design per il pulsante Segui per i blog, con supporto per la modalità scura.

Apri anteprima

                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-900">Follow</button>

Componente pulsante Segui

Un componente del pulsante Segui complesso e reattivo con stile glassmorphism e colori vivaci, progettato per siti Web aziendali con supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 px-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800/50 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 backdrop-filter backdrop-blur-lg glass glass-vibrant">
    <div class="flex flex-col items-center">
      <img class="w-24 h-24 rounded-full mb-4 object-cover border-4 border-blue-500 dark:border-teal-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-1">John Doe</h2>
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Senior Developer</p>
      <button class="px-6 py-2 rounded-full bg-gradient-to-r from-blue-500 to-teal-500 text-white font-semibold shadow-lg transform transition duration-300 hover:scale-105 hover:from-blue-600 hover:to-teal-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:focus:ring-teal-400">
        Follow
      </button>
      <div class="flex mt-6 space-x-4 text-gray-700 dark:text-gray-300">
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.524A3 3 0 0010 9a3 3 0 00-2.254.98l-1.524 1.524A8.01 8.01 0 012 10c0-4.411 3.589-8 8-8s8 3.589 8 8z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
          </svg>
          <span>1.2k Followers</span>
        </div>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path d="M11 6a3 3 0 11-6 0 3 3 0 016 0zM14 10a4 4 0 01-8 0H5a6 6 0 0012 0h-1z" />
          </svg>
          <span>250 Following</span>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.glass {
  background-color: rgba(255, 255, 255, 0.2);
}
.dark .glass {
    background-color: rgba(50, 50, 50, 0.2);
}
.glass-vibrant {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
</style>

Glassmorphism Pulsante Segui

Componente del pulsante Segui Glassmorphism per i social media con tema scuro

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900">
  <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg border border-gray-100 border-opacity-20 dark:bg-gray-700 dark:bg-opacity-10 dark:border-gray-600 dark:border-opacity-20">
    <div class="flex items-center space-x-4">
      <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold text-white dark:text-gray-200">John Doe</h3>
        <p class="text-sm text-gray-200 dark:text-gray-400">@johndoe</p>
      </div>
      <button class="ml-auto px-6 py-2 bg-blue-500 text-white font-semibold rounded-full hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
        Follow
      </button>
    </div>
  </div>
</div>

Pulsante Segui con microinterazioni

Componente pulsante Segui reattivo con supporto per temi scuri e microinterazioni, progettato per applicazioni di social media che utilizzano Tailwind CSS. Presenta una combinazione di colori monocromatica ed elementi interattivi complessi.

Apri anteprima

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative inline-block group">
    <button class="px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full transition-all duration-300 ease-in-out transform group-hover:scale-105 group-active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:group-hover:bg-blue-600 dark:focus:ring-blue-600">
      Follow
    </button>
    <div class="absolute inset-0 rounded-full bg-blue-500 opacity-0 blur transition-all duration-500 ease-in-out group-hover:opacity-70"></div>
  </div>
</div>

Componente pulsante Segui

Un pulsante Segui in stile neumorfismo per una dashboard con supporto per temi scuri.

Apri anteprima

                <div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
    <button class="relative inline-flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-full shadow-lg transition-transform transform hover:scale-105 active:scale-95 dark:shadow-inner shadow-gray-300 ">
        <span class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-400 via-red-500 to-yellow-500 opacity-20 blur transition-all duration-500"></span>
        <span class="relative text-white font-bold text-lg">
            Follow
        </span>
    </button>
</div>

Componente del pulsante Segui dell'interfaccia utente in modalità oscura con effetti reattivi e supporto per temi scuri.

Apri anteprima

                <button
  class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out"
>
  Follow
</button>

Pulsante Segui

Un semplice pulsante Segui con stile Material Design, effetti reattivi e supporto per temi scuri.

Apri anteprima

                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out dark:bg-gray-700 dark:hover:bg-gray-800 dark:shadow-lg">Follow</button>

Componente pulsante Segui

Un componente reattivo Segui pulsante progettato in stile Material Design con supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg space-y-4">
        <img src="https://picsum.photos/100" alt="User Avatar" class="w-24 h-24 rounded-full border-2 border-indigo-500 shadow-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Software Developer</p>
        <button class="flex items-center justify-center w-full px-4 py-2 font-semibold text-white bg-blue-600 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600">
            <span>Follow</span>
        </button>
    </div>
</div>

Categorie

Pulsante Segui