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

Componente pulsante Segui

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

Aperto

Glassmorphism Pulsante Segui

Un pulsante follow reattivo con design Glassmorphism, 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