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
Boutons Glassmorphism utilisant des tons de terre pour un site Portfolio réactif avec mode sombre
Composant Brutalism Buttons
Un composant de boutons au design brutaliste, avec des couleurs à haute saturation, une mise en page réactive et une prise en charge du mode sombre, adapté aux sites Web d’entreprise et d’entreprise.
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.