Glassmorphism arc-en-ciel Retour en haut Bouton pour l’agriculture
Un composant de bouton « Retour en haut » complexe et réactif avec un design en verre et un dégradé arc-en-ciel, conçu pour les sites Web agricoles. Dispose d’effets de flou et de prise en charge du mode sombre.
HTML Code
<div class="fixed bottom-6 right-6 z-50">
<!-- Button to scroll to top (actual JS functionality would be added for this) -->
<button aria-label="Scroll to top" class="group relative overflow-hidden rounded-full p-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-blue-500 transition-all duration-300 transform hover:scale-105 active:scale-95">
<div class="absolute inset-0 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-20 dark:bg-opacity-20 rounded-full px-4 py-2 flex items-center justify-center space-x-2 border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-30 shadow-lg">
<svg class="h-6 w-6 text-gray-800 dark:text-gray-100 group-hover:text-white transition-colors duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span class="hidden sm:inline text-sm font-semibold text-gray-800 dark:text-gray-100 group-hover:text-white transition-colors duration-300">
To the Fields!
</span>
</div>
</button>
</div>Composants associés
Brutaliste Retour en haut Bouton
Un bouton brutaliste de retour en haut en Tailwind CSS, avec un contraste élevé, une typographie audacieuse et des bords nets. Comprend un dimensionnement réactif et la prise en charge du mode sombre.
Retour en haut du bouton
Un composant de bouton « Retour en haut » minimal et réactif avec prise en charge du mode sombre. Il apparaît après avoir fait défiler vers le bas et utilise un défilement fluide pour ramener l’utilisateur en haut de la page lorsqu’il clique dessus. Aucun JavaScript n’est utilisé pour le défilement, seulement du CSS.
Retour en haut de la page Composant du bouton
Un composant de bouton « Retour en haut » réactif avec un design inspiré du papier/de l’impression, une palette de couleurs triadique et des éléments visuels complexes, adapté aux sites de commerce électronique. Inclut la prise en charge du mode sombre.