Back to Top Button Component

<a href="#" aria-label="Back to top" class="fixed bottom-4 right-4 md:bottom-8 md:right-8 z-50 group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 dark:focus:ring-gray-100">
  <div class="relative w-14 h-14 md:w-16 md:h-16 rounded-full overflow-hidden shadow-lg transform transition-all duration-300 group-hover:scale-110 group-active:scale-95 border-2 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800">
    <!-- Artistic background layer -->
    <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-700 dark:to-gray-900 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      <!-- Example of a subtle watercolor texture effect (can be replaced with actual SVG or background image for more detail) -->
      <svg class="absolute inset-0 w-full h-full opacity-30 group-hover:opacity-50 transition-opacity duration-300" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <filter id="watercolorFilter" x="-50%" y="-50%" width="200%" height="200%">
            <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise" />
            <feDiffuseLighting in="noise" lighting-color="white" surfaceScale="2" result="light" />
            <feBlend in="SourceGraphic" in2="light" mode="overlay" />
          </filter>
        </defs>
        <rect width="100" height="100" fill="#fff" filter="url(#watercolorFilter)" class="dark:fill-gray-900"/>
      </svg>
    </div>
    <div class="absolute inset-0 flex items-center justify-center">
      <svg class="w-8 h-8 md:w-9 md:h-9 text-gray-700 dark:text-gray-300 transform transition-transform duration-300 group-hover:-translate-y-1 group-active:translate-y-0" 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>
    </div>
  </div>
</a>