Componenti Pulsante Segui Pulsante Segui con microinterazioni

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.

Anteprima

Codice HTML

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

Componenti correlati

BrutalistaSeguiPulsante

Un pulsante di inseguimento brutalista con supporto per la modalità reattiva e oscura.

Aperto

Componente pulsante Segui

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

Aperto

Componente pulsante Segui

Un componente del pulsante follow progettato in stile brutalismo con un contrasto elevato e un aspetto grezzo e audace. È reattivo e supporta temi scuri.

Aperto