Back to Top Button Component
A responsive 'Back to Top' button with microinteraction-focused animations, triadic color scheme, and dark theme support, suitable for a portfolio.
HTML Code
<div class="fixed bottom-6 right-6">
<a href="#top" class="group relative flex items-center justify-center p-3 rounded-full bg-blue-500 text-white shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:scale-110 dark:focus:ring-blue-800">
<svg class="w-6 h-6 transform transition-transform duration-300 group-hover:-translate-y-1 group-hocus:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7l4-4m0 0l4 4m-4-4v18"></path>
</svg>
<span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs font-semibold opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 delay-150">Back to Top</span>
</a>
</div>Related Components
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.
Art Deco Back to Top Button
A complex, Art Deco-inspired 'Back to Top' button component with geometric patterns and luxurious Ocean/Blue tones, designed for non-profit/charity websites. Includes responsive design and dark mode support.
Back to Top Button Component
A responsive 'Back to Top' button component for documentation/wiki sites, inspired by Memphis Design with a purple/violet color scheme. Includes dark mode support and a complex, interactive appearance.