Glassmorphism_Music_Follow_Button_Component
Un composant de bouton de suivi complexe et monochromatique conçu pour les plateformes musicales et audio, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou, entièrement réactif et avec prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
<div class="relative w-full max-w-sm p-6 rounded-2xl shadow-xl overflow-hidden backdrop-blur-lg bg-white/30 dark:bg-gray-800/30 ring-1 ring-inset ring-white/50 dark:ring-gray-700/50 transform-gpu transition-all duration-500 hover:scale-105 hover:shadow-2xl">
<!-- Background overlay for glass effect -->
<div class="absolute inset-0 z-0 bg-gradient-to-br from-blue-300/40 dark:from-sky-700/40 to-indigo-500/40 dark:to-blue-900/40 blur-3xl opacity-60 dark:opacity-40 pointer-events-none"></div>
<div class="relative z-10 flex flex-col items-center text-center space-y-4">
<!-- Artist/Profile Image -->
<div class="relative w-24 h-24 rounded-full overflow-hidden border-4 border-white/70 dark:border-gray-600/70 shadow-lg group-hover:scale-110 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/5.jpg" alt="Artist Avatar" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
</div>
<!-- Artist Name and Details -->
<div>
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mt-2 drop-shadow-sm">Aurora Rhapsody</h3>
<p class="text-md text-gray-600 dark:text-gray-300">Electronic / Ambient Artist</p>
<div class="flex justify-center items-center text-sm text-gray-700 dark:text-gray-400 space-x-2 mt-1">
<span><strong class="font-semibold">1.2M</strong> Followers</span>
<span class="h-1 w-1 bg-gray-500 rounded-full"></span>
<span><strong class="font-semibold">30</strong> Tracks</span>
</div>
</div>
<!-- Follow Button -->
<button class="follow-button group relative px-6 py-3 rounded-full overflow-hidden shadow-lg bg-blue-500/60 dark:bg-sky-700/60 transition-all duration-300 ring-1 ring-inset ring-blue-400/80 dark:ring-sky-600/80 transform-gpu hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-sky-500">
<!-- Glassmorphism background for button -->
<span class="absolute inset-0 bg-blue-400/30 dark:bg-sky-600/30 backdrop-blur-sm group-hover:bg-blue-500/40 dark:group-hover:bg-sky-700/40 transition-colors duration-300"></span>
<span class="relative z-10 flex items-center text-lg font-semibold text-white group-hover:text-white dark:text-white drop-shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 transition-transform group-hover:rotate-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 14v4m-2 2h4m-2-6a4 4 0 100-8 4 4 0 000 8z" />
</svg>
Follow
</span>
</button>
<!-- CTA / More Info -->
<a href="#" class="text-sm text-gray-700 dark:text-gray-400 hover:underline mt-4">
<span class="flex items-center space-x-1">
<span>View Profile</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</span>
</a>
</div>
</div>
</div>Composants associés
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.
Composant Suivre le bouton
Un composant de bouton de suivi simple et réactif conçu pour les plateformes de rencontres/sociales avec une palette de couleurs pastel et une prise en charge du mode sombre.
Glassmorphism Suivre le bouton
Composant de bouton de suivi Glassmorphism pour les médias sociaux avec thème sombre