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
Un composant de boutons conçu dans le style Material Design avec une palette de couleurs pastel, réactif pour les sites Web d’entreprise/d’entreprise et prenant en charge les thèmes sombres.
Composant Boutons
Un composant de bouton à thème rétro-vintage avec une palette de couleurs triadiques, une complexité simple et un design réactif avec prise en charge du mode sombre, adapté à un blog ou à un site Web de contenu.
Composant Boutons
Un composant de boutons minimaliste conçu pour un portfolio présentant des travaux ou des produits, avec des couleurs vives et un design réactif avec prise en charge du thème sombre à l’aide de Tailwind CSS.