Back to Top Button Component

<div class="fixed bottom-4 right-4 z-50">
  <a href="#top" aria-label="Back to top" class="group outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 rounded-full transition-all duration-300 ease-in-out">
    <div class="relative flex items-center justify-center w-14 h-14 sm:w-16 sm:h-16 rounded-full overflow-hidden shadow-xl 
                bg-gradient-to-br from-amber-600 to-red-800 dark:from-amber-800 dark:to-red-950 
                group-hover:scale-105 group-active:scale-95 transition-all duration-300 ease-in-out 
                border-2 border-orange-200 dark:border-orange-900 
                group-hover:border-orange-50 dark:group-hover:border-orange-800">
      
      <!-- Artistic Background Element (faux watercolor effect) -->
      <div class="absolute inset-0 opacity-70 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
        <div class="absolute w-full h-full transform rotate-45 scale-150" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><filter id=\'f1\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.02\' numOctaves=\'3\' stitchTiles=\'stitch\'/><feColorMatrix type=\'saturate\' values=\'0\'/><feMorphology operator=\'dilate\' radius=\'2\'/><feGaussianBlur stdDeviation=\'2\'/></filter><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' fill=\'orange\' filter=\'url(%23f1)\' opacity=\'0.5\'/></svg>'); background-size: cover; background-position: center; border-radius: 50%; opacity: 0.1;"></div>
        <div class="absolute w-full h-full transform -rotate-30 scale-120" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><filter id=\'f1\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.02\' numOctaves=\'3\' stitchTiles=\'stitch\'/><feColorMatrix type=\'saturate\' values=\'0\'/><feMorphology operator=\'dilate\' radius=\'2\'/><feGaussianBlur stdDeviation=\'2\'/></filter><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' fill=\'brown\' filter=\'url(%23f1)\' opacity=\'0.5\'/></svg>'); background-size: cover; background-position: center; border-radius: 50%; opacity: 0.1;"></div>
        <div class="absolute w-full h-full transform rotate-60 scale-130" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><filter id=\'f1\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.02\' numOctaves=\'3\' stitchTiles=\'stitch\'/><feColorMatrix type=\'saturate\' values=\'0\'/><feMorphology operator=\'dilate\' radius=\'2\'/><feGaussianBlur stdDeviation=\'2\'/></filter><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' fill=\'maroon\' filter=\'url(%23f1)\' opacity=\'0.5\'/></svg>'); background-size: cover; background-position: center; border-radius: 50%; opacity: 0.12;"></div>
      </div>

      <!-- Main Arrow Icon -->
      <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white dark:text-gray-200 
                  group-hover:-translate-y-1 transition-transform duration-300 ease-in-out" 
           xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="12 19 12 5"></polyline>
        <polyline points="5 12 12 5 19 12"></polyline>
      </svg>

      <!-- Optional: Small decorative leaf icon for artistic touch -->
      <div class="absolute top-1 left-1 sm:top-2 sm:left-2 opacity-50 group-hover:opacity-80 transition-opacity duration-300 ease-in-out">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-orange-200 dark:text-orange-300 -rotate-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M11 20A7 7 0 0 1 9.86 6.47c-.91-1.3-4.4-3.5-4.4-3.5A2 2 0 0 0 2 4.47l.53 2.53c-.36 1.06-.6 2.3-.6 3.65C2 17.13 8.37 22 15 22h2c2.76 0 5-2 5-4s-2.76-4-5-4h-2.18c-.75 0-1.46.24-2.07.67A7 7 0 0 1 11 20z"></path>
          <path d="M11.5 6.5s2.5 2.5 5 0 2.5-5 0-5-5 2.5-5 0"></path>
        </svg>
      </div>
    </div>
  </a>
</div>