Components Back to Top Button Back to Top Button Component

Back to Top Button Component

A responsive Back to Top button designed in a skeuomorphic style, featuring dark theme support and responsive effects.

Preview

HTML Code

<div class="fixed bottom-10 right-10 z-50">
    <a href="#top" class="bg-white dark:bg-gray-800 rounded-full shadow-lg p-3 transition-transform transform hover:scale-110"> 
        <img src="https://picsum.photos/50/50?random=1" alt="Back to Top" class="w-full h-full rounded-full">
    </a>
    <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white text-sm rounded-lg shadow-md p-2 mt-2 text-center">
        Back to Top
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white { background-color: #1f2937; }
    .bg-gray-200 { background-color: #4b5563; }
    .bg-gray-700 { background-color: #2d3748; }
    .text-gray-800 { color: #f7fafc; }
}
</style>

Related Components

Back to Top Button Component

A brutalist styled Back to Top Button component using Tailwind CSS. This component has bold, high-contrast design and supports responsive effects and dark theme.

Open

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

Back to Top Button - Brutalism

A brutalist 'Back to Top' button component for a portfolio, with a triadic color scheme and simple design. It is responsive and supports dark mode using Tailwind CSS.

Open