Components Back to Top Button Back to Top Button - Brutalism

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.

Preview

HTML Code

<a href="#" class="fixed bottom-4 right-4 bg-red-500 text-yellow-300 border-4 border-black dark:bg-red-700 dark:text-yellow-100 dark:border-white transition-all duration-300 hover:bg-red-600 hover:text-yellow-400 dark:hover:bg-red-800 dark:hover:text-yellow-200 p-4 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] z-50">
    <span class="font-extrabold text-xl uppercase">↑<br/>Top</span>
</a>

Related Components

Back to Top Button Component

A responsive 'Back to Top' button that follows Material Design principles, supporting dark mode with Tailwind CSS for styling and responsive effects.

Open

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

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