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
Composant Boutons
Un composant de bouton minimaliste pour les tableaux de bord, avec prise en charge du responsive design et du thème sombre.
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.
Composant Boutons
Un composant de boutons de style rétro/vintage qui présente des effets réactifs et une prise en charge du thème sombre, conçu pour évoquer la nostalgie de l’esthétique des années 80 et 90.