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.
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.
Componente pulsante Segui
Un componente reattivo Segui pulsante progettato in stile Material Design con supporto per la modalità oscura utilizzando Tailwind CSS.
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.