Components Back to Top Button Back to Top Button - Material Design Pastel

Back to Top Button - Material Design Pastel

A responsive "Back to Top" button component following Material Design principles with a pastel color scheme, tailored for a portfolio website. It includes responsive design and dark mode support using Tailwind CSS.

Preview

HTML Code

<button class="fixed bottom-5 right-5 bg-pink-300 text-white p-3 rounded-full shadow-lg transition-opacity hover:opacity-75 focus:outline-none dark:bg-pink-700 dark:text-gray-200">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
  </svg>
</button>

Related Components

Back to Top Button - Brutalism

A brutalist 'Back to Top' button component for a portfolio, with a triadic color scheme and simple design. It is responsive and supports dark mode using Tailwind CSS.

Open

Brutalist Back to Top

A brutalist Back to Top button component using grayscale colors and Tailwind CSS. It is responsive and supports dark mode.

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