Composant du bouton de suivi rétro
Un composant de bouton de suivi simple et réactif avec une esthétique rétro/vintage, une palette de couleurs complémentaires et un objectif de jeu, y compris la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant Suivre le bouton - Monospace/Style de développeur
Un composant de bouton de suivi complexe et interactif conçu pour les sites Web d’actualités/journalisme, avec une esthétique monospace/développeur avec des couleurs aux tons de bijou et une réactivité totale, y compris la prise en charge du mode sombre.
Bouton de suivi de la conception matérielle
Un composant de bouton de suivi Material Design réactif et monochrome pour les blogs, avec prise en charge du mode sombre.
Composant de bouton de suivi neumorphe
Un composant de bouton de suivi complexe, de style neumorphe, avec des tons crépuscules/chauds, conçu pour les plateformes immobilières. Il présente un design réactif et une prise en charge du mode sombre, donnant l’impression que les éléments s’extrudent de l’arrière-plan à l’aide d’ombres subtiles.