Retro_Rainbow_Buttons_Component
Une collection de boutons arc-en-ciel dégradés à thème rétro conçus pour les galeries de photographie et les portfolios, avec une complexité modérée et une réactivité totale et une prise en charge du mode sombre.
HTML Code
<div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="container mx-auto p-4 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-2xl transition-colors duration-300">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-10 tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 dark:from-purple-400 dark:via-pink-300 dark:to-red-300 drop-shadow-lg">
Capture the Moment
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8 justify-items-center">
<!-- Button 1: Classic Retro -->
<button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-lg
bg-gradient-to-br from-yellow-400 via-orange-500 to-red-600
text-white font-bold uppercase tracking-wider text-lg
transition-all duration-300
transform hover:-translate-y-1 hover:scale-105
focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-500/50">
<span class="absolute inset-0 border-4 border-white dark:border-gray-900 rounded-lg group-hover:rotate-6 group-hover:scale-110 transition-transform duration-300"></span>
<span class="relative z-10">View Gallery</span>
</button>
<!-- Button 2: Striped Retro -->
<button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-lg
bg-gradient-to-b from-blue-500 via-purple-600 to-pink-500
text-white font-bold uppercase tracking-wider text-base
transition-all duration-300
transform hover:-skew-x-6 hover:scale-105
focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-500/50">
<span class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/30 to-transparent
w-full h-full rotate-45 transform -translate-x-full
group-hover:translate-x-full transition-transform duration-700"></span>
<span class="relative z-10">Portfolio</span>
</button>
<!-- Button 3: Gradient Border -->
<button class="relative group px-7 py-3 rounded-lg
bg-gray-200 dark:bg-gray-700
text-gray-800 dark:text-gray-200
font-bold uppercase tracking-wide text-lg
transition-all duration-300
transform hover:scale-105 hover:shadow-xl
focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-500/50">
<div class="absolute inset-0.5 rounded-md bg-white dark:bg-gray-800"></div>
<div class="absolute inset-0.5 rounded-md bg-gradient-to-br from-green-400 via-blue-500 to-purple-600
animate-pulse group-hover:animate-none
opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
<span class="relative z-10">My Work</span>
</button>
<!-- Button 4: Neon Glow Effect -->
<button class="relative group px-8 py-3 rounded-lg shadow-lg
bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500
text-white font-bold uppercase tracking-wider text-base
transition-all duration-300
transform hover:translate-y-px hover:shadow-2xl
focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-500/50">
<span class="absolute inset-0.5 rounded-lg
bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500
filter blur-md opacity-75 group-hover:opacity-100 transition-opacity duration-300"></span>
<span class="relative z-10
drop-shadow-[0_0_5px_rgba(255,255,255,0.7)] group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,1)] transition-all duration-300">About Me</span>
</button>
<!-- Button 5: Square Pixelated -->
<button class="relative group overflow-hidden px-8 py-3
bg-gradient-to-br from-teal-400 via-lime-500 to-yellow-500
text-white font-bold uppercase tracking-wider text-lg
shadow-lg transform transition-all duration-300
hover:-translate-x-1 hover:-translate-y-1
active:translate-x-0 active:translate-y-0
focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-500/50"
style="clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%);">
<span class="absolute inset-0 bg-black/10 dark:bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></span>
<span class="relative z-10 drop-shadow-md">Contact</span>
</button>
<!-- Button 6: Multi-layered 3D -->
<button class="relative group px-8 py-3
bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500
text-white font-bold uppercase tracking-wider text-base
shadow-[5px_5px_0_0_rgba(0,0,0,0.2)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,0.1)]
transition-all duration-300 transform
hover:-translate-x-1 hover:-translate-y-1
hover:shadow-[7px_7px_0_0_rgba(0,0,0,0.3)] dark:hover:shadow-[7px_7px_0_0_rgba(255,255,255,0.15)]
focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-500/50">
<span class="relative z-10">Services</span>
<span class="absolute inset-0 border-2 border-white dark:border-gray-900 -translate-x-1 -translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></span>
</button>
</div>
<div class="mt-16 text-center text-gray-600 dark:text-gray-400 text-sm md:text-base">
<p>Explore my photography journey, one click at a time.</p>
<p class="mt-2">© <span id="current-year"></span> Your Photography Name. All rights reserved.</p>
</div>
</div>
</div>
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>Composants associés
Composant Boutons
Composant de boutons réactifs avec conception matérielle, schéma de couleurs triadique et prise en charge du thème sombre.
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.
Composant Boutons
Composant de boutons de neumorphisme avec schéma de couleurs monochromatiques à des fins de portefeuille, réactif avec prise en charge du thème sombre.