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.
HTML Code
<div class="flex justify-center items-center h-screen bg-blue-100 dark:bg-gray-900 duration-300">
<!-- Component Wrapper -->
<a href="#top" class="
relative z-10
p-4 md:p-5
rounded-full
shadow-neumorphic-light-blue dark:shadow-neumorphic-dark-blue
text-blue-600 dark:text-blue-300
hover:shadow-neumorphic-light-blue-pressed dark:hover:shadow-neumorphic-dark-blue-pressed
active:shadow-neumorphic-light-blue-pressed dark:active:shadow-neumorphic-dark-blue-pressed
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
group
">
<svg class="w-8 h-8 md:w-10 md:h-10 rotate-180 transition-transform duration-300 group-hover:-translate-y-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<!-- Hidden arrow for hover effect (optional, uncomment to enable) -->
<!-- <svg class="absolute w-8 h-8 md:w-10 md:h-10 text-blue-400 dark:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 inset-0 m-auto -translate-y-2 group-hover:translate-y-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg> -->
</a>
<!-- Tailwind JIT custom utility classes for neumorphism (add these to your tailwind.config.js) -->
<style>
/* Light mode */
.shadow-neumorphic-light-blue {
box-shadow: 6px 6px 12px #98b3d6, -6px -6px 12px #cbe7ff;
}
.shadow-neumorphic-light-blue-pressed {
box-shadow: inset 4px 4px 8px #98b3d6, inset -4px -4px 8px #cbe7ff;
}
/* Dark mode */
.dark .shadow-neumorphic-dark-blue {
box-shadow: 6px 6px 12px #181c2f, -6px -6px 12px #263456;
}
.dark .shadow-neumorphic-dark-blue-pressed {
box-shadow: inset 4px 4px 8px #181c2f, inset -4px -4px 8px #263456;
}
</style>
</div>Related Components
Neumorphic Back to Top Button
A neumorphic "Back to Top" button for e-commerce, offering a subtle, soft UI design that blends with the background using delicate shadows. It features analogous colors for a harmonious look, a simple layout, and responsive design with dark theme support, ideal for online shopping experiences.
Back to Top Button Component
A responsive back to top button with a paper/print-inspired design, using a black and white color scheme with a subtle accent. Suitable for educational platforms, it includes dark mode support and a clean, accessible layout.
Back to Top Button
A minimalist, flat designed Back to Top button that fits within a dashboard interface. The button is styled in a monochromatic color scheme and includes hover and focus effects for better interactivity. It is also responsive and supports dark mode.