Componente pulsante Segui
Un componente pulsante "Segui" reattivo progettato per le piattaforme immobiliari, caratterizzato da una combinazione di colori blu aziendale, supporto per la modalità scura e un sottile effetto hover interattivo.
Codice HTML
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
<button class="relative flex items-center justify-center px-6 py-2 overflow-hidden font-semibold text-white transition-all duration-300 ease-in-out bg-blue-600 rounded-lg group shadow-lg dark:bg-blue-700 dark:shadow-blue-900/50 hover:shadow-xl hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
<span class="relative z-10 text-base group-hover:text-white transition-colors duration-200">
Follow
</span>
<svg class="absolute w-0 h-0 transition-all duration-300 ease-in-out transform -translate-x-full opacity-0 group-hover:opacity-100 group-hover:w-6 group-hover:h-6 group-hover:translate-x-0 group-hover:text-white" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
<span class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-700 to-blue-500 rounded-lg opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100"></span>
</button>
</div>Componenti correlati
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.
Componente pulsante Segui
Un pulsante "Segui" pulito e minimalista progettato con una tavolozza di colori retrò/vintage, adatto per una dashboard o una pagina del profilo. È dotato di uno stato hover interattivo e del supporto per la modalità scura, che incarna i principi della tipografia svizzera/internazionale.
Componente pulsante Segui
Un componente complesso del pulsante di follow, ispirato alla carta/stampa, per i siti Web di gioco, caratterizzato da un design monocromatico in bianco e nero con un colore d'accento brillante, ottimizzato per la reattività e la modalità scura.