Back to Top Button
A responsive Back to Top button component designed with a glassmorphism effect, suitable for professional business websites. It features a simple layout with minimal elements and works well in both light and dark themes.
HTML Code
<div class="fixed bottom-5 right-5">
<a href="#" class="bg-white bg-opacity-30 backdrop-blur-md border border-gray-200 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-600 text-gray-800 dark:text-gray-200 rounded-full p-3 shadow-lg hover:shadow-2xl transition-transform transform hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</a>
</div>Related Components
Brutalism Back to Top Button
Back to Top Button Component with Brutalism style, Triadic color scheme, and Complex complexity. Responsive design with dark theme support. No JavaScript.
Back to Top Button
A minimalist, flat designed Back to Top button that fits within a dashboard interface. The button is styled in a monochromatic color scheme and includes hover and focus effects for better interactivity. It is also responsive and supports dark mode.
Brutalist Back to Top Button
A brutalist back-to-top button in Tailwind CSS, with high contrast, bold typography and sharp edges. Includes responsive sizing and dark mode support.