Boutons de galerie de photos interactifs
Un ensemble de boutons réactifs et interactifs conçus pour les galeries de photos et les portfolios de photographes, avec une palette de couleurs forêt/vert et de subtils effets de micro-interaction pour l’engagement de l’utilisateur. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center p-4 min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8">Explore Galleries</h2>
<div class="flex flex-wrap justify-center gap-4">
<!-- Primary Button: View All Photos -->
<button class="group relative inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500
dark:bg-emerald-700 dark:hover:bg-emerald-600 dark:focus:ring-emerald-600
overflow-hidden transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
<span class="absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-emerald-800 dark:bg-emerald-900"></span>
<span class="relative z-10 flex items-center">
<svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path>
</svg>
View All Photos
</span>
</button>
<!-- Secondary Button: Categories -->
<button class="group relative inline-flex items-center justify-center px-6 py-3 border border-emerald-600 text-base font-medium rounded-full text-emerald-700 bg-white hover:bg-emerald-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500
dark:border-emerald-600 dark:text-emerald-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-emerald-600
overflow-hidden transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
<span class="absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-emerald-100 dark:bg-emerald-900"></span>
<span class="relative z-10 flex items-center">
<svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M7 3a1 1 0 00-1 1v1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1V6a1 1 0 00-1-1H7V4a1 1 0 00-1-1zM5 7h4v2H5V7zm8-4a1 1 0 00-1 1v1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1V6a1 1 0 00-1-1h-3V4a1 1 0 00-1-1zM11 7h4v2h-4V7zM4 13a1 1 0 00-1 1v1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 00-1-1H4zm1 2h4v2H5v-2zm8-2a1 1 0 00-1 1v1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 00-1-1h-3zm1 2h4v2h-4v-2z"></path>
</svg>
Categories
</span>
</button>
<!-- Tertiary Button: Hire Me -->
<button class="group relative inline-flex items-center justify-center px-6 py-3 border-2 border-emerald-500 text-base font-medium rounded-full text-emerald-600 hover:text-white bg-transparent hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500
dark:border-emerald-400 dark:text-emerald-400 dark:hover:text-white dark:hover:bg-emerald-500 dark:focus:ring-emerald-500
overflow-hidden transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
<span class="absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-emerald-600 dark:bg-emerald-500"></span>
<span class="relative z-10 flex items-center">
<svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"></path>
</svg>
Hire Me
</span>
</button>
</div>
<p class="mt-8 text-sm text-gray-500 dark:text-gray-400">
Click to explore more, with subtle visual feedback.
</p>
</div>Composants associés
Composant Boutons
Boutons de style Material Design avec une palette de couleurs en niveaux de gris à des fins de portfolio, avec un design réactif avec prise en charge du thème sombre.
Composant Boutons
Un composant de boutons simple stylisé avec Material Design, utilisant une palette de couleurs monochromatiques et prenant en charge le mode sombre, adapté aux sites Web d’entreprise.
3D_Business_Buttons_Component
Un ensemble réactif de boutons d’entreprise de style 3D avec une palette de couleurs chaudes de coucher de soleil, adapté aux sites Web d’entreprise. Comprend la prise en charge du mode sombre et des effets de survol interactifs.