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.
HTML Code
<div class="relative min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-8 flex flex-col justify-end items-center font-serif">
<!-- Simulate scrollable content -->
<div class="absolute inset-0 overflow-auto z-0">
<div class="h-[2000px] w-full p-8 text-center text-blue-950 dark:text-gray-100">
<p class="mb-8 text-3xl font-bold">Scroll down to see the 'Back to Top' button emerge!</p>
<p class="text-lg leading-relaxed max-w-2xl mx-auto mb-12">
This area simulates a long page content for a non-profit organization.
Imagine stories of impact, charity events, and donation appeals.
Our mission is to bring light to those in need, echoing the profound depths
and calming expanse of the ocean. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- Back to Top Button Wrapper (hidden by default, would be controlled by JS for scroll threshold) -->
<div class="fixed bottom-8 right-8 z-50 animate-fade-in-up md:bottom-12 md:right-12 lg:bottom-16 lg:right-16">
<a href="#top" class="group block w-20 h-20 md:w-24 md:h-24 lg:w-28 lg:h-28 relative overflow-hidden
bg-gradient-to-br from-blue-400 to-indigo-600 dark:from-blue-700 dark:to-indigo-900
rounded-full shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out
transform hover:scale-105 active:scale-95
border-4 border-blue-200 dark:border-blue-950">
<!-- Art Deco Geometric Pattern Overlay -->
<div class="absolute inset-0 rounded-full overflow-hidden">
<div class="absolute inset-0 bg-blue-300 opacity-20 dark:bg-blue-900 dark:opacity-30"></div>
<div class="absolute w-full h-full
before:content-[''] before:absolute before:inset-0 before:bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(255,255,255,0.1)_5px,_rgba(255,255,255,0.1)_10px)] dark:before:bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(0,0,0,0.1)_5px,_rgba(0,0,0,0.1)_10px)]
after:content-[''] after:absolute after:inset-0 after:bg-[repeating-linear-gradient(-45deg,_transparent_0,_transparent_5px,_rgba(255,255,255,0.1)_5px,_rgba(255,255,255,0.1)_10px)] dark:after:bg-[repeating-linear-gradient(-45deg,_transparent_0,_transparent_5px,_rgba(0,0,0,0.1)_5px,_rgba(0,0,0,0.1)_10px)]
"></div>
<div class="absolute inset-0 bg-gradient-to-tr from-transparent via-blue-500/20 to-transparent
dark:via-blue-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<!-- Arrow Icon (SVG for crispness) -->
<svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 lg:w-14 lg:h-14
text-white group-hover:text-blue-50 dark:text-gray-100 dark:group-hover:text-amber-200
transition-colors duration-300 ease-in-out animate-bounce-y
group-hover:animate-none" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
</svg>
<!-- Subtle border glow effect on hover -->
<div class="absolute inset-0 rounded-full border-4 border-transparent
group-hover:border-blue-50 dark:group-hover:border-amber-200
transition-colors duration-300 opacity-0 group-hover:opacity-100"></div>
<!-- Decorative elements -->
<div class="absolute top-2 left-2 w-4 h-4 rounded-full bg-blue-100/30 dark:bg-amber-100/30 blur-sm"></div>
<div class="absolute bottom-2 right-2 w-3 h-3 rounded-full bg-blue-200/30 dark:bg-amber-200/30 blur-sm"></div>
</a>
</div>
<!-- Keyframes for animation -->
<style>
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
animation: fade-in-up 0.5s ease-out forwards;
}
@keyframes bounce-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.animate-bounce-y {
animation: bounce-y 1.5s infinite;
}
</style>
</div>
Related Components
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.
Back to Top Button
A simple Back to Top button with Glassmorphism design and Monochromatic color scheme for e-commerce websites.
Back to Top Button
A minimalist 'Back to Top' button with responsive effects and dark theme support using Tailwind CSS.