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 pulsante Segui
Un complesso componente del pulsante "Segui" con microinterazioni, combinazione di colori seppia/marrone, design reattivo e supporto per la modalità scura, adatto per piattaforme di blog/contenuti.
Componente pulsante Segui
Un componente reattivo del pulsante Segui/Smetti di seguire adatto per siti Web di eventi e conferenze, con transizioni sfumate, supporto per la modalità scura e un colore di accento brillante. Include un sottile effetto al passaggio del mouse e modifica il testo e lo sfondo al clic (simulato).
Componente pulsante Segui
Un componente pulsante "Segui" complesso e reattivo con transizioni di colore sfumate e tenui, progettato per le piattaforme immobiliari. Include il supporto per la modalità oscura e utilizza l'HTML semantico.