Components Back to Top Button Back to Top Button

Back to Top Button

A simple Back to Top button with Glassmorphism design and Monochromatic color scheme for e-commerce websites.

Preview

HTML Code

<div class="fixed bottom-10 right-10">
    <a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-white bg-opacity-30 backdrop-blur-md shadow-lg hover:bg-opacity-50 transition duration-300 dark:bg-gray-800 dark:bg-opacity-50 dark:hover:bg-opacity-70">
        <img src="https://picsum.photos/32" alt="Back to Top" class="w-8 h-8" />
    </a>
</div>

Related Components

Back to Top Button

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

Back to Top Button Component

A responsive 'Back to Top' button with microinteraction-focused animations, triadic color scheme, and dark theme support, suitable for a portfolio.

Open

Back to Top Button - 3D Design

A Back to Top button with a 3D design, responsive effects, and dark theme support using Tailwind CSS. No JavaScript is included.

Open