Boutons de divertissement ludiques
Un ensemble de boutons ludiques et amusants conçus pour une plate-forme de divertissement ou de médias, avec des couleurs sourdes/désaturées et des éléments arrondis. Réactif et inclut la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-8 md:p-12 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-white dark:bg-gray-700 rounded-3xl shadow-xl p-6 sm:p-8 md:p-10 border border-gray-200 dark:border-gray-600 transition-all duration-300">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-center mb-8 sm:mb-10 text-gray-800 dark:text-gray-100 leading-tight">
Your Next Obsession Starts Here!
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8">
<!-- Button 1: Stream Now -->
<button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-purple-300 dark:bg-purple-600 text-white dark:text-purple-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-500 overflow-hidden">
<span class="absolute inset-0 bg-transparent group-hover:bg-purple-400 dark:group-hover:bg-purple-700 opacity-50 rounded-full transition-all duration-300"></span>
<svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
</svg>
<span class="relative z-10 text-lg sm:text-xl">Stream Now</span>
</button>
<!-- Button 2: Discover More -->
<button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-teal-300 dark:bg-teal-600 text-white dark:text-teal-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-500 overflow-hidden">
<span class="absolute inset-0 bg-transparent group-hover:bg-teal-400 dark:group-hover:bg-teal-700 opacity-50 rounded-full transition-all duration-300"></span>
<svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="relative z-10 text-lg sm:text-xl">Discover More</span>
</button>
<!-- Button 3: My Watchlist -->
<button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-orange-300 dark:bg-orange-600 text-white dark:text-orange-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-500 overflow-hidden">
<span class="absolute inset-0 bg-transparent group-hover:bg-orange-400 dark:group-hover:bg-orange-700 opacity-50 rounded-full transition-all duration-300"></span>
<svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z"></path>
</svg>
<span class="relative z-10 text-lg sm:text-xl">My Watchlist</span>
</button>
<!-- Button 4: Browse Genres -->
<button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-rose-300 dark:bg-rose-600 text-white dark:text-rose-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-500 overflow-hidden">
<span class="absolute inset-0 bg-transparent group-hover:bg-rose-400 dark:group-hover:bg-rose-700 opacity-50 rounded-full transition-all duration-300"></span>
<svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
<span class="relative z-10 text-lg sm:text-xl">Browse Genres</span>
</button>
<!-- Button 5: Recently Added -->
<button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-sky-300 dark:bg-sky-600 text-white dark:text-sky-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-500 overflow-hidden">
<span class="absolute inset-0 bg-transparent group-hover:bg-sky-400 dark:group-hover:bg-sky-700 opacity-50 rounded-full transition-all duration-300"></span>
<svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
</svg>
<span class="relative z-10 text-lg sm:text-xl">Recently Added</span>
</button>
<!-- Button 6: Settings/Profile -->
<button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-gray-300 dark:bg-gray-500 text-gray-800 dark:text-gray-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-400 overflow-hidden">
<span class="absolute inset-0 bg-transparent group-hover:bg-gray-400 dark:group-hover:bg-gray-600 opacity-50 rounded-full transition-all duration-300"></span>
<img class="h-8 w-8 sm:h-9 sm:w-9 rounded-full mr-2 sm:mr-3 object-cover shadow-inner" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
<span class="relative z-10 text-lg sm:text-xl">My Account</span>
</button>
</div>
<div class="mt-10 sm:mt-12 text-center text-gray-600 dark:text-gray-300 text-sm sm:text-base">
<p class="mb-2">Enjoy endless entertainment anywhere, anytime.</p>
<p>© <span id="current-year"></span> Your Entertainment Platform. All rights reserved.</p>
</div>
</div>
</div>
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>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.
Composant Boutons
Un composant de boutons au design minimaliste / plat avec une palette de couleurs en niveaux de gris. Il convient aux sites Web d’entreprise et a une complexité modérée avec certaines fonctionnalités interactives. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS.
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.