Search Components

Back to Top Button

Button that scrolls page back to the top

Neumorphic Back to Top Button (Ocean Blue)

A simple 'Back to Top' button component designed with a neumorphic style, using ocean blue tones, suitable for music/audio platforms. It's fully responsive and supports dark mode.

Open Preview

                <div class="flex justify-center items-center h-screen bg-blue-100 dark:bg-gray-900 duration-300">
  <!-- Component Wrapper -->
  <a href="#top" class="
      relative z-10 
      p-4 md:p-5 
      rounded-full 
      shadow-neumorphic-light-blue dark:shadow-neumorphic-dark-blue 
      text-blue-600 dark:text-blue-300 
      hover:shadow-neumorphic-light-blue-pressed dark:hover:shadow-neumorphic-dark-blue-pressed 
      active:shadow-neumorphic-light-blue-pressed dark:active:shadow-neumorphic-dark-blue-pressed 
      transition-all duration-300 ease-in-out 
      focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 
      group
    ">
    <svg class="w-8 h-8 md:w-10 md:h-10 rotate-180 transition-transform duration-300 group-hover:-translate-y-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
    </svg>

    <!-- Hidden arrow for hover effect (optional, uncomment to enable) -->
    <!-- <svg class="absolute w-8 h-8 md:w-10 md:h-10 text-blue-400 dark:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 inset-0 m-auto -translate-y-2 group-hover:translate-y-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
    </svg> -->
  </a>

  <!-- Tailwind JIT custom utility classes for neumorphism (add these to your tailwind.config.js) -->
  <style>
    /* Light mode */
    .shadow-neumorphic-light-blue {
      box-shadow: 6px 6px 12px #98b3d6, -6px -6px 12px #cbe7ff;
    }
    .shadow-neumorphic-light-blue-pressed {
      box-shadow: inset 4px 4px 8px #98b3d6, inset -4px -4px 8px #cbe7ff;
    }

    /* Dark mode */
    .dark .shadow-neumorphic-dark-blue {
      box-shadow: 6px 6px 12px #181c2f, -6px -6px 12px #263456;
    }
    .dark .shadow-neumorphic-dark-blue-pressed {
      box-shadow: inset 4px 4px 8px #181c2f, inset -4px -4px 8px #263456;
    }
  </style>
</div>

Back to Top Button Component

A responsive 'Back to Top' button component designed for e-commerce, featuring a vibrant color scheme on a dark background. It includes a subtle hover effect and ensures visibility across all screen sizes with dark mode support.

Open Preview

                <div class="fixed bottom-4 right-4 z-50">
  <a href="#top" class="group block p-3 rounded-full bg-gradient-to-br from-purple-600 to-indigo-500 shadow-lg transition-all duration-300 ease-in-out hover:from-purple-700 hover:to-indigo-600 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800">
    <svg class="w-6 h-6 text-white transform transition-transform duration-300 ease-in-out group-hover:-translate-y-1" 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>
    <span class="sr-only">Back to Top</span>
  </a>
</div>

Skeuomorphic Back to Top Button

A simple, responsive, and skeumorphic 'Back to Top' button component for forum/community platforms, designed with a forest/green color palette and full dark mode support.

Open Preview

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

Skeuomorphic Back to Top Button

A skeuomorphic 'Back to Top' button designed with warm neutrals for business/corporate websites, featuring responsive design and dark mode support. The button has a 3D pressed effect.

Open Preview

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

Glassmorphism Rainbow Back to Top Button for Agriculture

A complex, responsive 'Back to Top' button component with a glassmorphism design and a rainbow gradient, tailored for agriculture/farming websites. Features blur effects and dark mode support.

Open Preview

                <div class="fixed bottom-6 right-6 z-50">
  <!-- Button to scroll to top (actual JS functionality would be added for this) -->
  <button aria-label="Scroll to top" class="group relative overflow-hidden rounded-full p-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-blue-500 transition-all duration-300 transform hover:scale-105 active:scale-95">
    <div class="absolute inset-0 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
    <div class="relative bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-20 dark:bg-opacity-20 rounded-full px-4 py-2 flex items-center justify-center space-x-2 border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-30 shadow-lg">
      <svg class="h-6 w-6 text-gray-800 dark:text-gray-100 group-hover:text-white transition-colors duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
      </svg>
      <span class="hidden sm:inline text-sm font-semibold text-gray-800 dark:text-gray-100 group-hover:text-white transition-colors duration-300">
        To the Fields!
      </span>
    </div>
  </button>
</div>

Back to Top Button Component

A responsive 'Back to Top' button component with a paper/print-inspired design, triadic color scheme, and complex visual elements, suitable for e-commerce sites. Includes dark mode support.

Open Preview

                <div class="fixed bottom-4 right-4 z-50">
  <!-- Back to Top Button -->
  <a href="#top" aria-label="Back to top" class="group relative flex items-center justify-center p-2 sm:p-3 bg-indigo-500 hover:bg-indigo-600 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:focus:ring-emerald-800 rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-110 active:scale-95 overflow-hidden border-2 border-indigo-700 dark:border-emerald-800 animate-bounce-slow">
    <!-- Paper Fold Effect - Top Right -->
    <div class="absolute top-0 right-0 w-0 h-0 border-t-[10px] border-l-[10px] sm:border-t-[15px] sm:border-l-[15px] border-solid border-transparent border-t-indigo-700 dark:border-t-emerald-800 transform rotate-45 translate-x-[4px] -translate-y-[4px] sm:translate-x-[6px] sm:-translate-y-[6px] group-hover:scale-125 transition-transform duration-300"></div>
    <div class="absolute top-0 right-0 w-0 h-0 border-t-[10px] border-l-[10px] sm:border-t-[15px] sm:border-l-[15px] border-solid border-transparent border-t-white dark:border-t-gray-900 opacity-20 transform rotate-45 translate-x-[6px] -translate-y-[6px] sm:translate-x-[9px] sm:-translate-y-[9px] group-hover:opacity-30 transition-opacity duration-300"></div>

    <!-- Print Lines Texture -->
    <div class="absolute inset-0 bg-[length:16px_16px] opacity-10 dark:opacity-15" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(255,255,255,0.1) 1px, rgba(255,255,255,0.1) 2px);"></div>
    <div class="absolute inset-0 bg-[length:16px_16px] opacity-10 dark:opacity-15" style="background-image: repeating-linear-gradient(-45deg, transparent, transparent 1px, rgba(0,0,0,0.1) 1px, rgba(0,0,0,0.1) 2px);"></div>

    <!-- Inner Shadow for depth -->
    <div class="absolute inset-0 rounded-full shadow-[inset_0_0_8px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_0_8px_rgba(0,0,0,0.5)]"></div>

    <!-- Icon with subtle 3D effect -->
    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-white dark:text-gray-900 filter drop-shadow-[0_1px_1px_rgba(0,0,0,0.4)] dark:drop-shadow-[0_1px_1px_rgba(255,255,255,0.1)] transition-transform duration-300 group-hover:-translate-y-1" 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>

    <!-- Subtle shine effect on hover -->
    <div class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="background: radial-gradient(circle at 50% 0, rgba(255,255,255,0.3) 0%, transparent 70%);"></div>

    <!-- Hidden text for screen readers (optional, could be replaced by aria-label) -->
    <span class="sr-only">Back to Top</span>
  </a>
</div>

<!-- Just for demonstration purposes to show the button in action -->
<!-- Add a large div to allow scrolling -->
<div id="top" class="min-h-[200vh] bg-neutral-100 dark:bg-gray-800 p-8">
  <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">Scroll Down to See the Button</h1>
  <p class="text-gray-700 dark:text-gray-300">This is placeholder content to make the page scrollable.</p>
  <div class="h-[140vh] flex items-end justify-center">
    <p class="text-gray-700 dark:text-gray-300">Scroll more to truly appreciate the button's presence!</p>
  </div>
</div>

Art Deco Back to Top Button

A 'Back to Top' button component with an Art Deco design, featuring geometric patterns and warm sunset colors, suitable for dating/social platforms. It includes a rich, interactive style and supports dark mode.

Open Preview

                <div class="fixed bottom-8 right-8 z-50">
  <a href="#" class="group relative flex items-center justify-center p-0.5 overflow-hidden text-2xl font-bold text-white shadow-lg focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800 transition-all duration-300 hover:scale-105 active:scale-95 transform rotate-0 hover:rotate-3">
    <span class="absolute inset-0 bg-gradient-to-br from-orange-400 via-red-500 to-yellow-600 dark:from-orange-700 dark:via-red-800 dark:to-yellow-900 opacity-90 group-hover:opacity-100 transition-opacity duration-300 filter blur-sm group-hover:blur-none"></span>
    <span class="absolute inset-0 bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(255,255,255,0.1)_5px,_rgba(255,255,255,0.1)_10px)] dark:bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(0,0,0,0.2)_5px,_rgba(0,0,0,0.2)_10px)] opacity-30 group-hover:opacity-50 transition-opacity duration-300 transform group-hover:scale-110 group-hover:rotate-12"></span>
    <span class="relative flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-tl from-orange-600 to-red-600 dark:from-red-900 dark:to-orange-900 rounded-full group-hover:rounded-2xl transition-all duration-300 overflow-hidden shadow-inner shadow-orange-900/50 dark:shadow-red-950/50 group-hover:shadow-lg group-hover:shadow-orange-900/70 dark:group-hover:shadow-red-950/70">
      <span class="absolute inset-0 border-4 border-yellow-300 dark:border-yellow-700 rounded-full group-hover:rounded-2xl transition-all duration-300 opacity-60 group-hover:opacity-100"></span>
      <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white dark:text-gray-200 transform group-hover:-translate-y-1 transition-transform duration-300" 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 class="absolute bottom-1 right-1 w-4 h-4 bg-yellow-300 dark:bg-yellow-700 rounded-full blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </span>
  </a>
</div>

Back to Top Button Component

A responsive 'Back to Top' button component styled with Material Design principles, muted colors, and dark mode support, suitable for blog or content consumption websites.

Open Preview

                <div class="fixed bottom-4 right-4 z-50">
  <button
    onclick="window.scrollTo({top: 0, behavior: 'smooth'});"
    class="hidden md:flex items-center justify-center w-12 h-12 rounded-full shadow-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200
           hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500
           transition-all duration-300 ease-in-out transform hover:scale-110"
    aria-label="Back to top"
  >
    <svg
      class="w-6 h-6"
      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>
  </button>
</div>

Back to Top Button Component

A simple, artistic 'Back to Top' button designed for food/restaurant websites, featuring a watercolor-inspired grayscale aesthetic. It's responsive and supports dark mode.

Open Preview

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

Art Deco Back to Top Button

A complex, Art Deco-inspired 'Back to Top' button component with geometric patterns and luxurious Ocean/Blue tones, designed for non-profit/charity websites. Includes responsive design and dark mode support.

Open Preview

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

Search Components

Categories

Back to Top Button