Search Components

Back to Top Button

Button that scrolls page back to the top

Back to Top Button Component

A responsive 'Back to Top' button with an artistic watercolor design, autumn color scheme, and dark mode support, suitable for blog/content sites.

Open Preview

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

A responsive 'Back to Top' button component for e-commerce sites, featuring a black and white monochrome design with a bright accent color, and an engaging microinteraction on hover. Includes dark mode support.

Open Preview

                <div class="fixed bottom-4 right-4 z-50">
  <!-- Back to Top Button -->
  <a href="#top" aria-label="Scroll back to top of page" class="group outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 rounded-full">
    <button class="relative w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 flex items-center justify-center bg-white dark:bg-gray-800 rounded-full shadow-lg transition-all duration-300 ease-in-out transform group-hover:-translate-y-1 group-focus:-translate-y-1 group-active:-translate-y-1 group-hover:scale-105 group-focus:scale-105 group-active:scale-105 overflow-hidden border border-gray-200 dark:border-gray-700">
      <!-- Background accent on hover -->
      <div class="absolute inset-0 bg-purple-500 rounded-full scale-0 group-hover:scale-100 group-focus:scale-100 group-active:scale-100 transition-transform duration-300 ease-out"></div>
      
      <!-- SVG Icon -->
      <svg class="relative w-6 h-6 md:w-7 md:h-7 lg:w-8 lg:h-8 text-gray-800 dark:text-white group-hover:text-white dark:group-hover:text-white transition-colors 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>
    </button>
  </a>
</div>

Back to Top Button Component

A responsive, visually appealing 'Back to Top' button with a triadic color scheme, gradient, and smooth transitions, suitable for a portfolio site, including dark mode support.

Open Preview

                <div class="fixed bottom-6 right-6 z-50">
  <!-- The button is initially hidden and would be revealed by JS on scroll -->
  <!-- For demonstration, it's always visible here. In a real app, add a 'hidden' class by default -->
  <button aria-label="Scroll to top" class="group flex h-14 w-14 items-center justify-center rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
    bg-gradient-to-br from-emerald-400 via-teal-500 to-blue-600
    dark:from-emerald-600 dark:via-teal-700 dark:to-blue-800">
    <svg class="h-8 w-8 text-white 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>
  </button>
</div>

Back to Top Button Component

A 'back to top' button for CRM/Business Tools, designed in a Bauhaus style with high-contrast colors, featuring geometric forms and responsiveness for all screen sizes, including dark mode support.

Open Preview

                <div class="fixed bottom-4 right-4 z-50">
  <!-- Outer square container for Bauhaus aesthetic -->
  <a href="#" class="group block w-14 h-14 md:w-16 md:h-16 lg:w-20 lg:h-20 bg-blue-600 dark:bg-yellow-400 p-1 md:p-2 lg:p-3 relative overflow-hidden transition-all duration-300 ease-in-out hover:scale-110 active:scale-95 shadow-lg dark:shadow-yellow-800/50">
    <!-- Inner square acts as a focus element, rotates on hover -->
    <div class="w-full h-full bg-red-600 dark:bg-black flex items-center justify-center transform transition-transform duration-300 ease-in-out group-hover:rotate-45">
      <!-- Arrow Icon - Simple geometric shapes -->
      <svg class="w-8 h-8 md:w-10 md:h-10 text-white dark:text-blue-600 transform -rotate-90 group-hover:scale-125 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>
    </div>
    <span class="sr-only">Back to Top</span>
  </a>
</div>

Back to Top Button Component - Brutalism Earth Tones

A complex 'Back to Top' button component designed in a brutalist style with an earthy color scheme, suitable for blog/content sites. It is responsive and includes dark mode support.

Open Preview

                <div class="fixed bottom-4 right-4 z-50">
  <!-- Outer 'Frame' Element -->
  <div class="p-2 border-2 border-stone-800 dark:border-stone-200 bg-stone-100 dark:bg-stone-900 shadow-brutalist-light dark:shadow-brutalist-dark transition-colors duration-300 md:p-3 lg:p-4">
    <!-- Inner 'Button' Element -->
    <a href="#top" aria-label="Scroll back to top" class="block w-16 h-16 md:w-20 md:h-20 lg:w-24 lg:h-24 bg-stone-700 dark:bg-stone-300 text-stone-100 dark:text-stone-900 border-2 border-stone-900 dark:border-stone-100 flex items-center justify-center relative overflow-hidden group transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-stone-500 dark:focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-100 dark:focus:ring-offset-stone-900">
      <!-- Brutalist Background Slash/Pattern -->
      <div class="absolute inset-0 bg-stone-600 dark:bg-stone-400 transform -rotate-45 scale-150 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      
      <!-- Main Arrow Icon -->
      <svg class="w-10 h-10 md:w-12 md:h-12 lg:w-16 lg:h-16 relative z-10 animate-arrow-bounce group-hover:animate-arrow-static transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
      </svg>
      
      <!-- Brutalist Text Overlay (hidden until hover/focus) -->
      <span class="absolute text-xs md:text-sm lg:text-base font-bold uppercase tracking-widest opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 z-20 -bottom-full group-hover:bottom-2 group-focus:bottom-2 transform rotate-90 origin-bottom-left group-hover:rotate-0 group-focus:rotate-0 transition-all duration-300 text-stone-100 dark:text-stone-900 bg-stone-800 dark:bg-stone-200 px-1 py-0.5 rounded-sm">TOP</span>
    </a>
  </div>
</div>

<style>
  /* Add this if you need custom keyframe animations not covered by default Tailwind */
  @keyframes arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .animate-arrow-bounce {
    animation: arrow-bounce 1.5s infinite;
  }

  .group:hover .animate-arrow-bounce, .group:focus .animate-arrow-bounce {
    animation: none; /* Stop bounce on hover/focus */
    transform: translateY(-5px); /* Optional: slight lift on hover */
  }

  /* Custom shadow for brutalism */
  .shadow-brutalist-light {
    box-shadow: 8px 8px 0px 0px #292524; /* Color-aligned with stone-800 */
  }
  .dark .shadow-brutalist-dark {
    box-shadow: 8px 8px 0px 0px #ede9e9; /* Color-aligned with stone-200 */
  }
</style>

Back to Top Button Component

A responsive back to top button with a paper/print-inspired design, using a black and white color scheme with a subtle accent. Suitable for educational platforms, it includes dark mode support and a clean, accessible layout.

Open Preview

                <div class="relative min-h-screen bg-gray-50 dark:bg-gray-900 font-sans">

  <!-- Simulate page content to demonstrate button functionality -->
  <div class="container mx-auto px-4 py-12">
    <h1 class="text-4xl md:text-5xl font-bold mb-8 text-gray-900 dark:text-gray-100 leading-tight">Welcome to Our Learning Platform</h1>
    
    <p class="mb-6 text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
      Explore a world of knowledge and expand your horizons. Our courses are designed to be engaging, informative, and accessible to everyone. Dive deep into subjects that ignite your curiosity and empower your future.
    </p>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/300/200?random=1" alt="Course Thumbnail" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-300 dark:border-gray-600">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Fundamentals of Web Development</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Learn the basics of HTML, CSS, and JavaScript to build your first website.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/300/200?random=2" alt="Course Thumbnail" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-300 dark:border-gray-600">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Introduction to Data Science</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Discover the power of data analysis and machine learning with practical examples.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/300/200?random=3" alt="Course Thumbnail" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-300 dark:border-gray-600">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Creative Writing Workshop</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Unleash your inner storyteller and master the art of compelling narratives.</p>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 prose lg:prose-lg max-w-none mb-12">
      <h2 class="text-3xl font-bold mb-4 border-b pb-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">Deep Dive into Learning</h2>
      <p>Our platform offers a diverse range of courses, from technology to arts, designed to foster continuous learning. We believe that education should be accessible and enjoyable. Each lesson is crafted by experts in their field, ensuring you receive high-quality, up-to-date information.</p>
      <p>Gain practical skills through hands-on exercises and real-world projects. Connect with a vibrant community of learners and educators. Share insights, ask questions, and collaborate on exciting new ideas. Education is a journey, and we're here to guide you every step of the way.</p>
      <p>Whether you're a beginner looking to pick up a new skill or an experienced professional aiming to refine your expertise, our comprehensive curriculum has something for everyone. Embrace the future of learning with us.</p>
      
      <ul class="list-disc list-inside space-y-2 mt-6">
        <li>Interactive lessons and quizzes</li>
        <li>Downloadable resources and guides</li>
        <li>Expert-led video tutorials</li>
        <li>Student discussion forums</li>
        <li>Certificate of completion</li>
      </ul>
      
      <p class="mt-6 italic text-gray-600 dark:text-gray-400">“The more that you read, the more things you will know. The more that you learn, the more places you'll go.” – Dr. Seuss</p>
    </div>

    <!-- Placeholder content to make the page scrollable -->
    <div class="h-[800px] w-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center rounded-lg shadow-md border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 text-xl font-semibold mb-12">
      Scroll down further to see the button appear!
    </div>
    <div class="h-[800px] w-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center rounded-lg shadow-md border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 text-xl font-semibold mb-12">
      Keep scrolling...
    </div>
    <div class="h-[800px] w-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center rounded-lg shadow-md border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 text-xl font-semibold">
      End of a very long page section.
    </div>

  </div>

  <!-- Back to Top Button -->
  <!-- Using a simple JS snippet to handle scroll visibility and scroll behavior -->
  <button id="back-to-top-btn" 
          class="fixed bottom-6 right-6 lg:bottom-8 lg:right-8 
                 opacity-0 translate-y-4 pointer-events-none 
                 transition-all duration-300 ease-in-out 
                 p-3 md:p-4 
                 bg-white dark:bg-gray-800 
                 border-2 border-gray-900 dark:border-gray-100 
                 rounded-full shadow-lg 
                 text-gray-900 dark:text-gray-100 
                 focus:outline-none focus:ring-4 focus:ring-accent-500/50 dark:focus:ring-accent-400/50 
                 hover:bg-gray-100 dark:hover:bg-gray-700 
                 hover:shadow-xl 
                 group"
          onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">
    <svg class="w-6 h-6 md:w-7 md:h-7 group-hover:scale-110 transition-transform duration-200 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>
    <span class="sr-only">Back to top</span>
  </button>

</div>

<script>
  const backToTopBtn = document.getElementById('back-to-top-btn');

  window.addEventListener('scroll', () => {
    if (window.scrollY > 300) { // Show button after scrolling 300px
      backToTopBtn.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
      backToTopBtn.classList.add('opacity-100', 'translate-y-0');
    } else {
      backToTopBtn.classList.remove('opacity-100', 'translate-y-0');
      backToTopBtn.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
    }
  });

  // Using the scrollIntoView for smooth scroll when button is clicked
  backToTopBtn.addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
<\/script>

<style>
  /* Define accent color variable */
  :root {
    --accent-color: #ef4444; /* Tailwind red-500 */
  }
  .dark:root {
    --accent-color: #f87171; /* Tailwind red-400 for dark mode */
  }

  /* Apply accent color to focus ring */
  .focus\:ring-accent-500\/50 {
    box-shadow: 0 0 0 4px rgba(var(--tw-accent-500-rgb), 0.5);
  }
  .dark\:focus\:ring-accent-400\/50 {
    box-shadow: 0 0 0 4px rgba(var(--tw-accent-400-rgb), 0.5);
  }

  /* Tailwind does not have a direct way to define custom colors on the fly for arbitrary properties, 
     so we're using a slight workaround with CSS variables for the focus ring, 
     assuming 'accent-500' and 'accent-400' are conceptually mapped to primary accent colors. 
     For a true Tailwind-only solution without global CSS, one would typically use 
     pre-defined Tailwind colors like `focus:ring-red-500/50`. 
     For this demo, we'll demonstrate a custom accent using the red-500/400 mapping. 
  */
  /* Example: Setting custom RGB values for accent to be used by ring */
  .focus\:ring-accent-500\/50 {
    --tw-accent-500-rgb: 239, 68, 68; /* red-500 */
  }
  .dark .focus\:ring-accent-400\/50 {
    --tw-accent-400-rgb: 248, 113, 113; /* red-400 */
  }

  /* Simulate a paper-like texture if desired (optional and beyond simple Tailwind classes) */
  /* 
  .bg-white, .dark:bg-gray-800 {
    background-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"%3E%3Cpath d="M0 0h3v3H0V0zm3 3h3v3H3V3z"/%3E%3C/g%3E%3C/svg%3E');
    background-size: 6px 6px;
  }
  */
</style>

Back to Top Button Component

A responsive 'Back to Top' button component for documentation/wiki sites, inspired by Memphis Design with a purple/violet color scheme. Includes dark mode support and a complex, interactive appearance.

Open Preview

                <div class="fixed bottom-4 right-4 z-50">
  <!-- Outer rotating square container -->
  <div class="relative w-20 h-20 sm:w-24 sm:h-24 md:w-28 md:h-28 lg:w-32 lg:h-32 transform rotate-45 group hover:rotate-0 transition-transform duration-500 ease-in-out">
    <!-- Larger inner purple square -->
    <div class="absolute inset-0 bg-purple-600 dark:bg-purple-800 rounded-lg shadow-xl group-hover:scale-110 transition-transform duration-300 ease-out"></div>

    <!-- Smaller offset violet triangle overlay -->
    <div class="absolute -bottom-2 -left-2 sm:-bottom-3 sm:-left-3 md:-bottom-4 md:-left-4 w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 lg:w-20 lg:h-20 bg-violet-400 dark:bg-violet-600 rounded-md transform rotate-12 group-hover:rotate-0 group-hover:scale-125 transition-all duration-500 ease-in-out"></div>

    <!-- Smaller offset lavendar circle overlay -->
    <div class="absolute -top-2 -right-2 sm:-top-3 sm:-right-3 md:-top-4 md:-right-4 w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 lg:w-20 lg:h-20 bg-indigo-300 dark:bg-indigo-500 rounded-full transform -rotate-12 group-hover:rotate-0 group-hover:scale-125 transition-all duration-500 ease-in-out"></div>

    <!-- The actual button element (positioned to appear central in the rotated context) -->
    <button
      aria-label="Back to top"
      onclick="window.scrollTo({ top: 0, behavior: 'smooth' });"
      class="absolute inset-0 flex items-center justify-center p-4 transform -rotate-45 group-hover:rotate-0 transition-transform duration-500 ease-in-out
             rounded-xl focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700
             active:scale-95 transition-transform duration-150"
    >
      <!-- Inner button styling for Memphis flair -->
      <div class="relative w-full h-full bg-purple-400 dark:bg-purple-700 rounded-lg border-4 border-dashed border-white border-opacity-70 dark:border-opacity-30 flex items-center justify-center
                  group-hover:bg-purple-500 dark:group-hover:bg-purple-900 transition-colors duration-300 ease-out">
        <!-- Arrow Icon -->
        <svg
          class="w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 text-white dark:text-gray-200 transition-transform duration-300 ease-out
                 group-hover:-translate-y-1 group-hover:scale-110"
          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>

        <!-- Small decorative dot overlay (Memphis style) -->
        <div class="absolute -top-1 -right-1 w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5 bg-pink-400 dark:bg-pink-600 rounded-full shadow-lg group-hover:scale-150 transition-transform duration-300"></div>
        <div class="absolute -bottom-1 -left-1 w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5 bg-teal-400 dark:bg-teal-600 rounded-full shadow-lg group-hover:scale-150 transition-transform duration-300"></div>
      </div>
    </button>
  </div>
</div>

Brutalism_Earth_Tone_Back_To_Top_Button

A brutalist-inspired 'Back to Top' button with earth tones, designed for blog/content sites. It's moderately complex, responsive, and supports dark mode. The button features a high-contrast design and a slightly crude aesthetic.

Open Preview

                <div class="fixed bottom-4 right-4 z-50 group" x-data="{ showButton: false }" @scroll.window="showButton = (window.pageYOffset > 300) ? true : false" x-show="showButton" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90 -translate-y-4" x-transition:enter-end="opacity-100 scale-100 translate-y-0" x-cloak>
  <button
    @click="window.scrollTo({top: 0, behavior: 'smooth'})"
    class="p-4 bg-lime-700 dark:bg-lime-900 border-2 border-stone-900 dark:border-stone-100
           text-stone-100 dark:text-stone-100 text-xl font-bold uppercase
           shadow-[4px_4px_0_0_rgba(28,25,23,1)] dark:shadow-[4px_4px_0_0_rgba(250,250,250,1)]
           hover:bg-lime-800 dark:hover:bg-lime-950
           active:shadow-[0px_0px_0_0_rgba(28,25,23,1)] active:translate-x-[4px] active:translate-y-[4px]
           focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-300/50
           transition-all duration-150 ease-in-out
           flex items-center justify-center space-x-2 w-16 h-16 sm:w-20 sm:h-20"
    aria-label="Back to top"
  >
    <svg class="w-8 h-8 sm:w-10 sm:h-10 transform -rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="square" stroke-linejoin="square" stroke-width="3" d="M9 5l7 7-7 7"></path>
    </svg>
  </button>
  <div class="absolute -top-1 -left-1 w-16 h-16 sm:w-20 sm:h-20 border-2 border-stone-900 dark:border-stone-100 pointer-events-none group-active:translate-x-[4px] group-active:translate-y-[4px] transition-all duration-150 ease-in-out"></div>
  <div class="absolute top-1 left-1 w-16 h-16 sm:w-20 sm:h-20 border-2 border-stone-900 dark:border-stone-100 pointer-events-none group-active:translate-x-[4px] group-active:translate-y-[4px] transition-all duration-150 ease-in-out"></div>
</div>

Back to Top Button Component

A responsive 'Back to Top' button with Material Design aesthetics, monochromatic color scheme, and dark mode support. It appears as a floating action button (FAB) in the bottom-right corner.

Open Preview

                <div class="fixed bottom-4 right-4 z-50">
  <button aria-label="Scroll to top" class="dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 dark:shadow-lg focus:outline-none dark:focus:ring-gray-500 rounded-full bg-gray-800 p-3 text-white shadow-md transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 active:scale-95 md:p-4 lg:p-5">
    <svg class="h-6 w-6 md:h-7 md:w-7 lg:h-8 lg:w-8" 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>

Neumorphic Back to Top Button

A neumorphic "Back to Top" button for e-commerce, offering a subtle, soft UI design that blends with the background using delicate shadows. It features analogous colors for a harmonious look, a simple layout, and responsive design with dark theme support, ideal for online shopping experiences.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <a href="#" class="back-to-top-button relative p-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center transition-all duration-300 hover:shadow-neumorphic-light-hover dark:hover:shadow-neumorphic-dark-hover"
    aria-label="Back to top">
    <svg class="w-6 h-6 text-indigo-600 dark:text-purple-400" 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>
  </a>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #cbced1, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
  }

  .shadow-neumorphic-light-hover {
    box-shadow: inset 6px 6px 12px #cbced1, inset -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-dark-hover {
    box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #2e2e2e;
  }
</style>

Search Components

Categories

Back to Top Button