Componenti Pulsante Segui Componente pulsante Segui

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.

Anteprima

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

Glassmorphism Pulsante Segui

Un pulsante follow reattivo con design Glassmorphism, supporto per la modalità oscura, utilizzando Tailwind CSS.

Aperto

Glassmorphism Pulsante Segui

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

Aperto

Componente Segui pulsante - Monospace/Stile sviluppatore

Un componente complesso e interattivo del pulsante follow progettato per siti Web di notizie/giornalismo, caratterizzato da un'estetica monospace/sviluppatore con colori gioiello e reattività completa, incluso il supporto della modalità scura.

Aperto