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
Back to Top Button Component
A responsive back to top button designed with microinteractions and vibrant colors, suitable for a dashboard interface with dark mode support.
Back to Top Button
Back to Top button with Neumorphic design, Monochromatic color scheme, and dark mode support. Uses Tailwind CSS.
Back to Top Button
A minimalist flat design Back to Top button component for e-commerce websites, utilizing a grayscale color scheme and responsive design with dark theme support.