Back to Top Button Component
A responsive 'Back to Top' button component designed for e-commerce, featuring a vibrant color scheme on a dark background. It includes a subtle hover effect and ensures visibility across all screen sizes with dark mode support.
HTML Code
<div class="fixed bottom-4 right-4 z-50">
<a href="#top" class="group block p-3 rounded-full bg-gradient-to-br from-purple-600 to-indigo-500 shadow-lg transition-all duration-300 ease-in-out hover:from-purple-700 hover:to-indigo-600 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800">
<svg class="w-6 h-6 text-white transform transition-transform duration-300 ease-in-out group-hover:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
</svg>
<span class="sr-only">Back to Top</span>
</a>
</div>Related Components
Back to Top Button
A minimal and responsive "Back to Top" button component with dark mode support. It appears after scrolling down and uses smooth scrolling to return the user to the top of the page when clicked. No JavaScript is used for the scrolling, only CSS.
Back to Top Button Component
A responsive Back to Top button designed in a skeuomorphic style, featuring dark theme support and responsive effects.
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.