Composant Boutons
Un ensemble de boutons interactifs conçus pour un portfolio, avec des micro-interactions, une palette de couleurs complémentaires et une réactivité totale avec prise en charge du mode sombre.
HTML Code
<div class="flex min-h-screen items-center justify-center bg-lime-50 py-12 dark:bg-slate-900 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-slate-800 dark:text-slate-100 sm:text-4xl">
Showcase Your Work
</h2>
<p class="mt-2 text-lg text-lime-600 dark:text-lime-400">
Click to explore interactive examples.
</p>
</div>
<div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-2">
<!-- Interactive Button 1: Project Details -->
<button class="group relative flex items-center justify-center overflow-hidden rounded-lg bg-lime-500 py-3 px-6 font-semibold text-white transition-all duration-300 ease-out hover:scale-105 active:scale-95 dark:bg-lime-600 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
<span class="absolute inset-0 z-0 bg-gradient-to-r from-lime-600 to-green-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-lime-700 dark:to-green-600"></span>
<span class="relative z-10 flex items-center">
<svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
View Project
</span>
</button>
<!-- Interactive Button 2: Live Demo -->
<button class="group relative flex items-center justify-center overflow-hidden rounded-lg bg-red-500 py-3 px-6 font-semibold text-white transition-all duration-300 ease-out hover:scale-105 active:scale-95 dark:bg-red-600 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
<span class="absolute top-0 left-0 h-full w-0 bg-red-600 transition-all duration-300 ease-out group-hover:w-full dark:bg-red-700"></span>
<span class="absolute right-0 bottom-0 h-full w-0 bg-red-600 transition-all duration-300 ease-out group-hover:w-full dark:bg-red-700"></span>
<span class="relative z-10 flex items-center">
<svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4-4m0 0l-4-4m4 4H9m11 7v3a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h3"></path>
</svg>
Live Demo
</span>
</button>
<!-- Interactive Button 3: Download Assets -->
<button class="group relative flex items-center justify-center overflow-hidden rounded-lg bg-orange-500 py-3 px-6 font-semibold text-white transition-all duration-300 ease-out hover:scale-105 active:scale-95 dark:bg-orange-600 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
<span class="absolute inset-0 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left bg-orange-600 dark:bg-orange-700"></span>
<span class="relative z-10 flex items-center">
<svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
</svg>
Download Assets
</span>
</button>
<!-- Interactive Button 4: GitHub Repo -->
<button class="group relative flex items-center justify-center overflow-hidden rounded-lg bg-violet-500 py-3 px-6 font-semibold text-white transition-all duration-300 ease-out hover:scale-105 active:scale-95 dark:bg-violet-600 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
<span class="absolute inset-0 bg-violet-600 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:bg-violet-700"></span>
<span class="relative z-10 flex items-center">
<svg class="mr-2 h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.417 2.868 8.129 6.837 9.488.499.091.682-.217.682-.483 0-.237-.008-.865-.013-1.698-2.782.603-3.37-1.341-3.37-1.341-.454-1.151-1.107-1.458-1.107-1.458-.907-.61.069-.598.069-.598 1.002.071 1.531 1.028 1.531 1.028.891 1.529 2.341 1.089 2.91.831.091-.645.35-1.088.636-1.338-2.22-.253-4.555-1.111-4.555-4.962 0-1.096.391-1.996 1.029-2.701-.103-.255-.447-1.272.098-2.651 0 0 .84-.271 2.75 1.029A9.563 9.563 0 0110 4.908c.85.004 1.701.114 2.502.327 1.909-1.298 2.747-1.029 2.747-1.029.546 1.379.202 2.396.099 2.651.64.705 1.028 1.605 1.028 2.701 0 3.864-2.339 4.707-4.568 4.953.359.309.678.918.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.577.688.481C17.135 18.118 20 14.406 20 10.017A9.994 9.994 0 0010 0z" clip-rule="evenodd"></path>
</svg>
GitHub Repo
</span>
</button>
</div>
<div class="text-center mt-8">
<p class="text-slate-600 dark:text-slate-400 text-sm">
Explore more projects by <a href="#" class="font-medium text-lime-700 hover:underline dark:text-lime-300">[Your Name]</a>
</p>
</div>
</div>
</div>Composants associés
Composant Glassmorphism Buttons
Un composant de bouton Glassmorphism simple et réactif avec des couleurs pastel et la prise en charge du mode sombre à l’aide de Tailwind CSS.
Skeuomorphic_Social_Buttons
Un ensemble complexe de boutons skeuomorphes avec une palette de couleurs vives, conçu pour les interfaces de médias sociaux. Comprend une mise en page réactive et la prise en charge du mode sombre, imitant les boutons du monde réel.
Composant Boutons neumorphes
Un composant de bouton doté d’un style de conception neumorphe avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.