Components Back to Top Button Back to Top Button Component

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.

Preview

HTML Code

<div class="fixed bottom-5 right-5">
    <a href="#top" class="bg-white dark:bg-gray-800 text-black dark:text-white p-4 rounded-lg shadow-lg font-bold transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-300 dark:hover:bg-gray-700">
        <span class="text-xl">⬆️</span>
    </a>
</div>

<style>
    /* Dark Mode Support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: black;
            color: white;
        }
    }

    /* General styles */
    body {
        font-family: 'Courier New', Courier, monospace;
        background-color: white;
        color: black;
        transition: background-color 0.5s, color 0.5s;
    }
</style>

Related Components

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

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