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 designed with microinteractions and vibrant colors, suitable for a dashboard interface with dark mode support.

Open Preview

                <div class="fixed bottom-4 right-4">
    <button class="bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-full p-3 shadow-lg hover:scale-110 transition-transform duration-300 dark:from-purple-800 dark:to-pink-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m0 0l-4-4m4 4l4-4" />
        </svg>
    </button>
</div>

Back to Top Button

A minimalist flat design Back to Top button component for e-commerce websites, utilizing a grayscale color scheme and responsive design with dark theme support.

Open Preview

                <div class="fixed bottom-5 right-5 z-50">
    <button class="bg-gray-800 text-white rounded-full p-3 shadow-md hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400 transition-all duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </button>
</div>

A minimal and responsive "Back to Top" button component with dark mode support. It appears after scrolling down and uses smooth scrolling to return the user to the top of the page when clicked. No JavaScript is used for the scrolling, only CSS.

Open Preview

                <div class="fixed bottom-4 right-4">
  <a href="#" class="bg-blue-500 text-white p-3 rounded-full shadow-md transition-opacity duration-300 opacity-0 group-hover:opacity-100 dark:bg-blue-700 dark:text-gray-200">
    <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>
  </a>
</div>

<style>
  /* This simple example uses CSS for smooth scrolling. For a production site, you might use a small amount of JavaScript for better compatibility and control over the scroll behavior and when the button appears. */
  html {
    scroll-behavior: smooth;
  }

  /* Basic example to show/hide the button based on scroll position. 
     A robust solution would involve JavaScript Intersection Observer or scroll events. */
  body:before {
    content: "";
    height: 200vh; /* Simulate a long page */
    display: block;
  }

  .group-hover\:opacity-100:hover + .fixed a {
      opacity: 1; /* This part is flawed for demonstrating scroll-based visibility without JS */
  }

  /* A better approach for scroll-based visibility would require JavaScript */
  .fixed a {
      /* Initially hidden, JS would make it visible on scroll */
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
  }


</style>

Back to Top Button Minimalist Vibrant

A minimal and flat Back to Top button component with vibrant colors, suitable for a portfolio website. It includes responsive design and dark mode support using Tailwind CSS.

Open Preview

                <a href="#" class="fixed bottom-6 right-6 bg-blue-500 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300 dark:bg-blue-700 dark:hover:bg-blue-900">
  <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>
</a>

Back to Top Button

A minimalist, flat designed Back to Top button that fits within a dashboard interface. The button is styled in a monochromatic color scheme and includes hover and focus effects for better interactivity. It is also responsive and supports dark mode.

Open Preview

                <div class="fixed bottom-8 right-8">
    <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-600 text-white shadow-lg transition-all ease-in-out duration-300 hover:bg-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </a>
</div>

Back to Top Button Component

A simple Back to Top button designed in a brutalist style using Tailwind CSS, suitable for a portfolio website. It features a grayscale color scheme and dark theme support.

Open Preview

                <div class="fixed bottom-5 right-5 z-50">
    <a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800 text-white hover:bg-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 transition-all duration-300 shadow-lg">
        ⬆️
    </a>
</div>

<div class="h-screen bg-gray-100 dark:bg-gray-800" id="top">
    <div class="container mx-auto p-5">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Portfolio</h1>
        <p class="text-gray-700 dark:text-gray-300">Showcasing my work and products.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-5">
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/200" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/201" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/202" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
        </div>
    </div>
</div>

Brutalism Back to Top Button

Back to Top Button Component with Brutalism style, Triadic color scheme, and Complex complexity. Responsive design with dark theme support. No JavaScript.

Open Preview

                <a href="#" class="fixed bottom-4 right-4 bg-red-500 dark:bg-cyan-500 text-yellow-300 dark:text-magenta-500 p-4 rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-cyan-500 border-4 border-black dark:border-white z-50">
    <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>
</a>

Back to Top Button - Material Design Pastel

A responsive "Back to Top" button component following Material Design principles with a pastel color scheme, tailored for a portfolio website. It includes responsive design and dark mode support using Tailwind CSS.

Open Preview

                <button class="fixed bottom-5 right-5 bg-pink-300 text-white p-3 rounded-full shadow-lg transition-opacity hover:opacity-75 focus:outline-none dark:bg-pink-700 dark:text-gray-200">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
</button>

Back to Top Button

A responsive Back to Top button component designed with a glassmorphism effect, suitable for professional business websites. It features a simple layout with minimal elements and works well in both light and dark themes.

Open Preview

                <div class="fixed bottom-5 right-5">
    <a href="#" class="bg-white bg-opacity-30 backdrop-blur-md border border-gray-200 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-600 text-gray-800 dark:text-gray-200 rounded-full p-3 shadow-lg hover:shadow-2xl transition-transform transform hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </a>
</div>

Brutalist Back to Top

A brutalist Back to Top button component using grayscale colors and Tailwind CSS. It is responsive and supports dark mode.

Open Preview

                <button class="fixed bottom-4 right-4 bg-black text-white border-2 border-black group dark:bg-white dark:text-black dark:border-white">
  <span class="block px-6 py-3 text-xl font-bold group-hover:-translate-x-2 group-hover:-translate-y-2 transition-all">
    ⬆️
  </span>
</button>

Search Components

Categories

Back to Top Button