Skeuomorphic Back to Top Button

<div class="fixed bottom-6 right-6 z-50">
  <button aria-label="Scroll to top" class="group outline-none focus:ring-4 focus:ring-green-700/50 dark:focus:ring-green-300/50 rounded-full transition-all duration-300 ease-in-out">
    <div class="p-4 rounded-full
      bg-gradient-to-br from-green-500 to-green-700
      dark:from-green-700 dark:to-green-900
      shadow-lg transition-all duration-300 ease-in-out
      shadow-green-800/60 dark:shadow-green-950/60
      group-hover:from-green-400 group-hover:to-green-600
      dark:group-hover:from-green-600 dark:group-hover:to-green-800
      active:from-green-600 active:to-green-800
      dark:active:from-green-800 dark:active:to-green-950
      active:shadow-inner active:shadow-green-900/50
      dark:active:shadow-green-950/50
      relative overflow-hidden cursor-pointer
      w-16 h-16 md:w-20 md:h-20 flex items-center justify-center
      ">
      <svg class="w-8 h-8 md:w-10 md:h-10 text-white shadow-text transform -translate-y-0.5
        group-hover:-translate-y-1.5 transition-transform duration-300 ease-in-out
        " 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>
      <!-- Highlight effect on hover (skeuomorphic shine) -->
      <div class="absolute inset-0 rounded-full
        bg-gradient-to-br from-white/20 via-transparent to-transparent
        opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out
        pointer-events-none
        dark:from-white/10
        "></div>
      <!-- Inner shadow for depth -->
      <div class="absolute inset-0 rounded-full
        shadow-inner shadow-green-900/30 dark:shadow-black/30
        "></div>
    </div>
  </button>
</div>