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.
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
Back to Top Button Component
A responsive Back to Top Button Component with Glassmorphism design, Earth tones color scheme, and complex interactions, suitable for a dashboard.
Back to Top Button Component
A responsive Back to Top button designed in a skeuomorphic style, featuring dark theme support and responsive effects.
Skeuomorphic Back to Top Button
A simple, responsive, and skeumorphic 'Back to Top' button component for forum/community platforms, designed with a forest/green color palette and full dark mode support.