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
Neumorphic Back to Top Button (Ocean Blue)
A simple 'Back to Top' button component designed with a neumorphic style, using ocean blue tones, suitable for music/audio platforms. It's fully responsive and supports dark mode.
Back to Top Button
A simple and elegant back-to-top button that appears fixed at the bottom-right corner of the screen. Features a subtle pastel color scheme and smooth hover/focus microinteractions. The button includes a responsive design with built-in dark mode support. When hovered, the button gently scales up and changes background color to provide visual feedback. The component uses Tailwind CSS classes only, with no JavaScript required.
Brutalism_Earth_Tone_Back_To_Top_Button
A brutalist-inspired 'Back to Top' button with earth tones, designed for blog/content sites. It's moderately complex, responsive, and supports dark mode. The button features a high-contrast design and a slightly crude aesthetic.