Retro_Back_To_Top_Button
Rétro/Vintage - Composant de bouton de retour en haut nostalgique pour la consommation de blog/contenu avec une palette de couleurs analogue. Conception complexe avec prise en charge du mode réactif et sombre.
HTML Code
<div class="fixed bottom-5 right-5">
<a href="#"
class="group flex items-center justify-center p-4 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 text-white shadow-lg transform transition-all duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:from-purple-700 dark:via-pink-700 dark:to-red-700 dark:focus:ring-purple-800"
aria-label="Back to top">
<svg class="h-8 w-8 transition-transform duration-300 group-hover:-translate-y-1" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
</svg>
</a>
</div>Composants associés
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.
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 bouton « retour en haut » pour les outils CRM/Business, conçu dans un style Bauhaus avec des couleurs à fort contraste, avec des formes géométriques et une réactivité pour toutes les tailles d’écran, y compris la prise en charge du mode sombre.