Gradient_Weather_Buttons
Un ensemble de boutons réactifs pour les prévisions météorologiques et les données climatiques, avec un dégradé violet/violet avec des transitions de survol fluides et la prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-black p-4">
<div class="flex flex-col sm:flex-row gap-4 p-6 rounded-xl shadow-2xl bg-white dark:bg-gray-800 dark:shadow-purple-950/50 backdrop-blur-sm bg-opacity-80 dark:bg-opacity-70">
<button class="relative group overflow-hidden px-6 py-3 rounded-full text-lg font-semibold text-white transition-all duration-300 ease-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full sm:w-auto">
<span class="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-600 transition-all duration-500 ease-out group-hover:from-purple-600 group-hover:to-indigo-700"></span>
<span class="relative z-10">Current Weather</span>
</button>
<button class="relative group overflow-hidden px-6 py-3 rounded-full text-lg font-semibold text-white transition-all duration-300 ease-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full sm:w-auto">
<span class="absolute inset-0 bg-gradient-to-r from-violet-500 to-purple-600 transition-all duration-500 ease-out group-hover:from-violet-600 group-hover:to-purple-700"></span>
<span class="relative z-10">7-Day Forecast</span>
</button>
<button class="relative group overflow-hidden px-6 py-3 rounded-full text-lg font-semibold text-white transition-all duration-300 ease-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full sm:w-auto">
<span class="absolute inset-0 bg-gradient-to-r from-indigo-500 to-violet-600 transition-all duration-500 ease-out group-hover:from-indigo-600 group-hover:to-violet-700"></span>
<span class="relative z-10">Climate Trends</span>
</button>
</div>
</div>Composants associés
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.
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.
Composant Boutons
Un composant de boutons simple stylisé avec Material Design, utilisant une palette de couleurs monochromatiques et prenant en charge le mode sombre, adapté aux sites Web d’entreprise.