Components Back to Top Button Back to Top Button

Back to Top Button

Preview

HTML Code

<div class="fixed bottom-4 right-4 z-50">
  <a href="#" class="bg-purple-600 dark:bg-purple-800 text-white dark:text-purple-200 p-4 rounded-full shadow-lg transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-purple-500 focus:ring-opacity-50">
    <svg class="w-6 h-6" 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>
  </a>
</div>

Related Components

Back to Top Button

A minimalist 'Back to Top' button with responsive effects and dark theme support using Tailwind CSS.

Open

Back to Top Button

Back to Top Button Component with 3D design, vibrant color scheme, and complex interactive elements for social media interfaces, using Tailwind CSS. It includes responsive design and dark theme support.

Open

Back to Top Button - 3D Design

A Back to Top button with a 3D design, responsive effects, and dark theme support using Tailwind CSS. No JavaScript is included.

Open