Art Deco 返回顶部按钮

<div class="relative min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-8 flex flex-col justify-end items-center font-serif">
  <!-- Simulate scrollable content -->
  <div class="absolute inset-0 overflow-auto z-0">
    <div class="h-[2000px] w-full p-8 text-center text-blue-950 dark:text-gray-100">
      <p class="mb-8 text-3xl font-bold">Scroll down to see the 'Back to Top' button emerge!</p>
      <p class="text-lg leading-relaxed max-w-2xl mx-auto mb-12">
        This area simulates a long page content for a non-profit organization.
        Imagine stories of impact, charity events, and donation appeals.
        Our mission is to bring light to those in need, echoing the profound depths
        and calming expanse of the ocean. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>

  <!-- Back to Top Button Wrapper (hidden by default, would be controlled by JS for scroll threshold) -->
  <div class="fixed bottom-8 right-8 z-50 animate-fade-in-up md:bottom-12 md:right-12 lg:bottom-16 lg:right-16">
    <a href="#top" class="group block w-20 h-20 md:w-24 md:h-24 lg:w-28 lg:h-28 relative overflow-hidden
      bg-gradient-to-br from-blue-400 to-indigo-600 dark:from-blue-700 dark:to-indigo-900
      rounded-full shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out
      transform hover:scale-105 active:scale-95
      border-4 border-blue-200 dark:border-blue-950">

      <!-- Art Deco Geometric Pattern Overlay -->
      <div class="absolute inset-0 rounded-full overflow-hidden">
        <div class="absolute inset-0 bg-blue-300 opacity-20 dark:bg-blue-900 dark:opacity-30"></div>
        <div class="absolute w-full h-full
          before:content-[''] before:absolute before:inset-0 before:bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(255,255,255,0.1)_5px,_rgba(255,255,255,0.1)_10px)] dark:before:bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(0,0,0,0.1)_5px,_rgba(0,0,0,0.1)_10px)]
          after:content-[''] after:absolute after:inset-0 after:bg-[repeating-linear-gradient(-45deg,_transparent_0,_transparent_5px,_rgba(255,255,255,0.1)_5px,_rgba(255,255,255,0.1)_10px)] dark:after:bg-[repeating-linear-gradient(-45deg,_transparent_0,_transparent_5px,_rgba(0,0,0,0.1)_5px,_rgba(0,0,0,0.1)_10px)]
          "></div>
        <div class="absolute inset-0 bg-gradient-to-tr from-transparent via-blue-500/20 to-transparent
          dark:via-blue-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Arrow Icon (SVG for crispness) -->
      <svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 lg:w-14 lg:h-14
        text-white group-hover:text-blue-50 dark:text-gray-100 dark:group-hover:text-amber-200
        transition-colors duration-300 ease-in-out animate-bounce-y
        group-hover:animate-none" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
      </svg>

      <!-- Subtle border glow effect on hover -->
      <div class="absolute inset-0 rounded-full border-4 border-transparent
        group-hover:border-blue-50 dark:group-hover:border-amber-200
        transition-colors duration-300 opacity-0 group-hover:opacity-100"></div>

      <!-- Decorative elements -->
      <div class="absolute top-2 left-2 w-4 h-4 rounded-full bg-blue-100/30 dark:bg-amber-100/30 blur-sm"></div>
      <div class="absolute bottom-2 right-2 w-3 h-3 rounded-full bg-blue-200/30 dark:bg-amber-200/30 blur-sm"></div>
    </a>
  </div>

  <!-- Keyframes for animation -->
  <style>
    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-up {
      animation: fade-in-up 0.5s ease-out forwards;
    }
    @keyframes bounce-y {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .animate-bounce-y {
      animation: bounce-y 1.5s infinite;
    }
  </style>
</div>