スキューモーフィック Back to Top ボタン

<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>