back-to-top-button
A Back to Top button component with microinteractions, earth tones color scheme, simple layout for business/corporate websites; responsive design with dark mode support using Tailwind CSS
HTML Code
<!-- Back to Top Button Component -->
<a href="#top" class="fixed bottom-6 right-6 flex items-center justify-center w-12 h-12 bg-emerald-700 text-white rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-500" aria-label="Back to Top">
<span class="sr-only">Back to Top</span>
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/>
</svg>
</a>
<!-- To enable smooth scrolling behavior across the page, add the `scroll-smooth` class to your `<html>` element: -->
<!-- <html class="scroll-smooth"> -->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 'Back to Top' button with responsive effects and dark theme support using Tailwind CSS.
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.