Skeuomorphic Retour en haut du bouton
Un bouton skeuomorphe « Retour en haut » conçu avec des neutres chauds pour les sites Web d’entreprise, avec un design réactif et une prise en charge du mode sombre. Le bouton a un effet de pression 3D.
HTML Code
<div class="fixed bottom-8 right-8 z-50">
<!-- Back to Top Button Wrapper -->
<button
onclick="window.scrollTo({ top: 0, behavior: 'smooth' });"
class="group relative flex h-16 w-16 items-center justify-center rounded-full
bg-gradient-to-br from-stone-100 to-stone-300 shadow-lg
hover:from-stone-200 hover:to-stone-400
dark:from-stone-700 dark:to-stone-900
dark:hover:from-stone-600 dark:hover:to-stone-800
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-4 focus:ring-stone-400 focus:ring-opacity-75
dark:focus:ring-stone-600"
aria-label="Back to top"
>
<!-- Inner Button 'Pressed' Effect -->
<span class="absolute inset-1 rounded-full
bg-gradient-to-br from-stone-50 to-stone-200
dark:from-stone-800 dark:to-stone-950
group-hover:from-stone-100 group-hover:to-stone-300
dark:group-hover:from-stone-700 dark:group-hover:to-stone-900
transition-all duration-300 ease-in-out
shadow-inner group-active:shadow-none group-active:inset-2">
</span>
<!-- Arrow Icon -->
<svg
class="relative h-8 w-8 text-stone-600 group-hover:text-stone-700 dark:text-stone-300 dark:group-hover:text-stone-100 transition-colors duration-300 ease-in-out"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5 10l7-7m0 0l7 7m-7-7v18"
/>
</svg>
<!-- 'Hover Light' Effect (Top-left highlight) -->
<div class="absolute inset-0 rounded-full opacity-0
bg-gradient-to-br from-white/70 to-transparent
dark:from-white/10 dark:to-transparent
group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<!-- 'Shadow Relief' Effect (Bottom-right shadow) -->
<div class="absolute inset-0 rounded-full opacity-0
bg-gradient-to-tl from-black/20 to-transparent
dark:from-black/40 dark:to-transparent
group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
</button>
</div>
<!-- To make the 'Back to Top' button visible and testable, add some scrollable content -->
<div class="h-screen w-full bg-stone-50 dark:bg-stone-900 flex items-center justify-center text-4xl text-stone-700 dark:text-stone-200 font-bold">
Scroll Down
</div>
<div class="h-screen w-full bg-stone-100 dark:bg-stone-800 flex items-center justify-center text-4xl text-stone-700 dark:text-stone-200 font-bold">
More Content
</div>
<div class="h-screen w-full bg-stone-200 dark:bg-stone-700 flex items-center justify-center text-4xl text-stone-700 dark:text-stone-200 font-bold">
Keep Scrolling
</div>
<div class="h-screen w-full bg-stone-300 dark:bg-stone-600 flex items-center justify-center text-4xl text-stone-700 dark:text-stone-200 font-bold">
End of Page
</div>Composants associés
Retour en haut de la page Composant du bouton
Un composant de bouton Retour en haut de style brutaliste utilisant Tailwind CSS. Ce composant a un design audacieux et contrasté et prend en charge les effets réactifs et le thème sombre.
Retour en haut Bouton Minimaliste Vibrant
Un composant de bouton Retour en haut minimal et plat avec des couleurs vives, adapté à un site web de portfolio. Il inclut un design réactif et la prise en charge du mode sombre à l’aide de Tailwind CSS.
Retour en haut du bouton
Un bouton simple et élégant de retour en haut qui apparaît fixe dans le coin inférieur droit de l’écran. Dispose d’une palette de couleurs pastel subtile et de micro-interactions fluides. Le bouton comprend un design réactif avec prise en charge intégrée du mode sombre. Lorsqu’il est survolé, le bouton s’agrandit doucement et change de couleur d’arrière-plan pour fournir un retour visuel. Le composant utilise uniquement les classes CSS Tailwind, sans JavaScript requis.