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.
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
Componente Neumorfico Pulsante Segui
Un componente complesso del pulsante di inseguimento in stile neumorfico con toni caldi e tramontanti, progettato per le piattaforme immobiliari. È dotato di un design reattivo e del supporto per la modalità oscura, che fa sembrare che gli elementi vengano estrusi dallo sfondo utilizzando ombre sottili.
Componente pulsante Segui
Un pulsante Segui in stile neumorfismo per una dashboard con supporto per temi scuri.
Componente pulsante Segui
Un componente semplice e reattivo del pulsante Segui progettato per piattaforme di appuntamenti/social con una combinazione di colori pastello e supporto per la modalità scura.