Components Back to Top Button Back to Top Button Component - Brutalism Earth Tones

Back to Top Button Component - Brutalism Earth Tones

A complex 'Back to Top' button component designed in a brutalist style with an earthy color scheme, suitable for blog/content sites. It is responsive and includes dark mode support.

Preview

HTML Code

<div class="fixed bottom-4 right-4 z-50">
  <!-- Outer 'Frame' Element -->
  <div class="p-2 border-2 border-stone-800 dark:border-stone-200 bg-stone-100 dark:bg-stone-900 shadow-brutalist-light dark:shadow-brutalist-dark transition-colors duration-300 md:p-3 lg:p-4">
    <!-- Inner 'Button' Element -->
    <a href="#top" aria-label="Scroll back to top" class="block w-16 h-16 md:w-20 md:h-20 lg:w-24 lg:h-24 bg-stone-700 dark:bg-stone-300 text-stone-100 dark:text-stone-900 border-2 border-stone-900 dark:border-stone-100 flex items-center justify-center relative overflow-hidden group transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-stone-500 dark:focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-100 dark:focus:ring-offset-stone-900">
      <!-- Brutalist Background Slash/Pattern -->
      <div class="absolute inset-0 bg-stone-600 dark:bg-stone-400 transform -rotate-45 scale-150 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      
      <!-- Main Arrow Icon -->
      <svg class="w-10 h-10 md:w-12 md:h-12 lg:w-16 lg:h-16 relative z-10 animate-arrow-bounce group-hover:animate-arrow-static transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
      </svg>
      
      <!-- Brutalist Text Overlay (hidden until hover/focus) -->
      <span class="absolute text-xs md:text-sm lg:text-base font-bold uppercase tracking-widest opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 z-20 -bottom-full group-hover:bottom-2 group-focus:bottom-2 transform rotate-90 origin-bottom-left group-hover:rotate-0 group-focus:rotate-0 transition-all duration-300 text-stone-100 dark:text-stone-900 bg-stone-800 dark:bg-stone-200 px-1 py-0.5 rounded-sm">TOP</span>
    </a>
  </div>
</div>

<style>
  /* Add this if you need custom keyframe animations not covered by default Tailwind */
  @keyframes arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .animate-arrow-bounce {
    animation: arrow-bounce 1.5s infinite;
  }

  .group:hover .animate-arrow-bounce, .group:focus .animate-arrow-bounce {
    animation: none; /* Stop bounce on hover/focus */
    transform: translateY(-5px); /* Optional: slight lift on hover */
  }

  /* Custom shadow for brutalism */
  .shadow-brutalist-light {
    box-shadow: 8px 8px 0px 0px #292524; /* Color-aligned with stone-800 */
  }
  .dark .shadow-brutalist-dark {
    box-shadow: 8px 8px 0px 0px #ede9e9; /* Color-aligned with stone-200 */
  }
</style>

Related Components

Back to Top Button

A simple and elegant back-to-top button that appears fixed at the bottom-right corner of the screen. Features a subtle pastel color scheme and smooth hover/focus microinteractions. The button includes a responsive design with built-in dark mode support. When hovered, the button gently scales up and changes background color to provide visual feedback. The component uses Tailwind CSS classes only, with no JavaScript required.

Open

Back to Top Button Component

A responsive Back to Top Button Component with Glassmorphism design, Earth tones color scheme, and complex interactions, suitable for a dashboard.

Open

Retro_Back_To_Top_Button

Retro/Vintage - Nostalgic Back to Top Button Component for Blog/Content consumption with Analogous color scheme. Complex design with responsive and dark mode support.

Open