Componenti Pulsante Segui Componente pulsante Segui retrò

Componente pulsante Segui retrò

Un componente semplice e reattivo del pulsante di inseguimento con un'estetica retrò/vintage, una combinazione di colori complementari e uno scopo di gioco, incluso il supporto della modalità oscura.

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 group flex items-center justify-center px-6 py-3 font-bold uppercase tracking-wider text-xl text-yellow-900 dark:text-yellow-100 transition-all duration-300 ease-in-out
    bg-gradient-to-br from-yellow-400 to-orange-500
    dark:from-yellow-700 dark:to-orange-800
    border-2 border-yellow-700 dark:border-yellow-900
    shadow-lg shadow-yellow-500/50 dark:shadow-yellow-900/50
    transform skew-x-[-10deg] hover:skew-x-0
    overflow-hidden
    rounded-lg
    focus:outline-none focus:ring-4 focus:ring-yellow-600 dark:focus:ring-yellow-800">
    
    <span class="relative z-10 flex items-center gap-2">
      <svg class="h-6 w-6 text-yellow-900 dark:text-yellow-100 transform -skew-x-[10deg] group-hover:skew-x-0 transition-transform duration-300" 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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 14v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0z"></path>
      </svg>
      <span class="transform -skew-x-[10deg] group-hover:skew-x-0 transition-transform duration-300">Follow Player</span>
    </span>

    <div class="absolute inset-0 bg-yellow-300 dark:bg-yellow-600 opacity-0 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"></div>

    <div class="absolute inset-0 border-2 border-yellow-800 dark:border-orange-900 border-dashed opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none transform scale-105 group-hover:scale-100"></div>

    <span class="absolute top-0 left-0 w-4 h-4 bg-yellow-700 dark:bg-yellow-900 transform -translate-x-1/2 -translate-y-1/2 rotate-45 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></span>
    <span class="absolute bottom-0 right-0 w-4 h-4 bg-yellow-700 dark:bg-yellow-900 transform translate-x-1/2 translate-y-1/2 rotate-45 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></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.

Aperto

Componente pulsante Segui

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

Aperto

Pulsante di follow-follow vibrante 3D

Un semplice componente del pulsante Segui ispirato al 3D con colori vivaci per i siti Web aziendali. È reattivo e include il supporto per il tema scuro utilizzando solo HTML e Tailwind CSS.

Aperto