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 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.
Composant Suivre le bouton
Un composant complexe de bouton « Suivre » avec des micro-interactions, une palette de couleurs sépia/marron, un design réactif et une prise en charge du mode sombre, adapté aux plateformes de blog/contenu.
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.