3D_Analogous_Simple_Follow_Button_Component
Un bouton « Suivre » simple et réactif avec une esthétique 3D et une palette de couleurs analogue, adapté à un site de portfolio, prenant en charge les modes clair et sombre.
HTML Code
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-[150px]">
<button class="relative group w-32 h-12 rounded-lg overflow-hidden font-semibold transition-all duration-300 ease-in-out
bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-700 dark:to-purple-800
text-white shadow-lg dark:shadow-xl
active:translate-y-0.5 active:shadow-sm
hover:from-indigo-600 hover:to-purple-700 dark:hover:from-indigo-800 dark:hover:to-purple-900">
<!-- Front face of the button -->
<div class="absolute inset-0 flex items-center justify-center
bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-700 dark:to-purple-800
rounded-lg
transition-all duration-300 ease-in-out
group-hover:opacity-0 group-hover:translate-y-full
group-active:translate-y-0.5 group-active:shadow-sm">
Follow
</div>
<!-- Back face (pressed state) / Alternative state -->
<div class="absolute inset-0 flex items-center justify-center
bg-gradient-to-br from-purple-600 to-pink-500 dark:from-purple-800 dark:to-pink-700
rounded-lg
transition-all duration-300 ease-in-out
origin-top
group-hover:translate-y-0 group-hover:opacity-100 group-hover:scale-y-1
-translate-y-full opacity-0 scale-y-0
transform-gpu
z-10">
Following!
</div>
<!-- Shadow/Depth effect -->
<div class="absolute inset-x-2 bottom-0 h-2 bg-gradient-to-br from-indigo-700 to-purple-800 dark:from-indigo-900 dark:to-purple-900 rounded-b-lg
filter blur-sm opacity-70 transition-all duration-300 ease-in-out
group-hover:h-0 group-hover:opacity-0
group-active:h-0 group-active:opacity-0"></div>
</button>
</div>
Composants associés
Composant du bouton de suivi cyberpunk
Il s’agit d’un composant de bouton « Suivre » complexe, sur le thème du cyberpunk, pour les outils CRM/professionnels, avec une palette de couleurs forêt/vert, des arrière-plans sombres et des accents néon brillants, avec une réactivité totale et une prise en charge du mode sombre.
Bouton de suivi 3D-Vibrant
Un composant de bouton de suivi simple, inspiré de la 3D, avec des couleurs vives pour les sites Web d’entreprise. Il est réactif et inclut la prise en charge des thèmes sombres en utilisant uniquement HTML et Tailwind CSS.
Composant Suivre le bouton
Un composant de bouton « Suivre » réactif conçu pour les plateformes immobilières, avec une palette de couleurs bleues d’entreprise, la prise en charge du mode sombre et un subtil effet de survol interactif.