CCHub Logo CCHub Tailwind Collection
Components Back to Top Button Back to Top Button - 3D Design

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.

Preview

HTML Code 

<div class="fixed bottom-4 right-4 group">
  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg 
                 transform transition-transform duration-300 
                 group-hover:scale-110 group-active:scale-90 
                 dark:bg-blue-800 dark:shadow-xl dark:group-hover:scale-110 dark:group-active:scale-90 
                 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    <svg class="h-6 w-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>
  </button>
</div>

Related Components

Back to Top Button

Back to Top button with Neumorphic design, Monochromatic color scheme, and dark mode support. Uses Tailwind CSS.

Open

Back to Top Button Component

A responsive 'Back to Top' button that follows Material Design principles, supporting dark mode with Tailwind CSS for styling and responsive effects.

Open

Back to Top Button Component

A simple Back to Top button designed in a brutalist style using Tailwind CSS, suitable for a portfolio website. It features a grayscale color scheme and dark theme support.

Open