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.
HTML Code
<button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="fixed bottom-6 right-6 p-3 rounded-full bg-pink-200 dark:bg-pink-900 text-pink-700 dark:text-pink-200 shadow-md hover:bg-pink-300 dark:hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-700 hover:scale-110 focus:scale-110 transition-all duration-300 group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform group-hover:-translate-y-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span class="sr-only">Back to top</span>
</button>Related Components
Brutalist Back to Top
A brutalist Back to Top button component using grayscale colors and Tailwind CSS. It is responsive and supports dark mode.
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.
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.