Back to Top Button

                <div class="fixed bottom-5 right-5 z-50">
  <button
    class="back-to-top-btn bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white p-4 rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800"
    aria-label="Back to top"
  >
    <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>
  </button>
</div>

<style>
  .back-to-top-btn {
    /* Adding basic 3D effect with box-shadow */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2),
                0 6px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
  }

  .back-to-top-btn:hover {
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
                  0 10px 10px rgba(0, 0, 0, 0.22);
  }

  .back-to-top-btn:active {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
                  0 1px 2px rgba(0, 0, 0, 0.24);
  }
</style>
              

                <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>
              

                <button class="fixed bottom-5 right-5 bg-black text-lime-400 border-4 border-lime-400 p-4 text-xl font-bold uppercase transition-all duration-300 hover:bg-lime-400 hover:text-black dark:bg-lime-400 dark:text-black dark:border-black dark:hover:bg-black dark:hover:text-lime-400">
    TOP
</button>
              

                <div class="fixed bottom-5 right-5 z-50">
    <button class="bg-blue-500 text-white rounded-full p-2 shadow-lg transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:shadow-md dark:focus:ring-blue-300">
        <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="M12 4v16m0 0L8 16m4 4l4-4" />
        </svg>
    </button>
</div>

<style>
  /* Tailwind dark mode support */
  @media (prefers-color-scheme: dark) {
      .bg-blue-500 { background-color: #3b82f6; }
      .bg-blue-700 { background-color: #2563eb; }
      .text-white { color: #ffffff; }
      .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
      .dark .shadow-md { box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); }
  }
</style>
              

                <template>
  <button
    id="back-to-top-btn"
    class="fixed bottom-6 right-6 bg-blue-600 text-white p-3 rounded-full shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800"
    onclick="scrollToTop()"
    aria-label="Back to top"
  >
    <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="M12 6V4m0 2l-3 3m3-3l3 3m-6 6h6a2 2 0 010 4H6a2 2 0 010-4z"
      ></path>
    </svg>
  </button>
</template>

<script>
  // This script is for demonstration purposes and would typically be in a separate JS file
  const backToTopButton = document.getElementById('back-to-top-btn');

  window.onscroll = function() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      backToTopButton.style.display = "block";
    } else {
      backToTopButton.style.display = "none";
    }
  };

  function scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
</script>

<style>
  /* Add any necessary component-specific styles here */
  #back-to-top-btn {
    display: none; /* Hidden by default */
  }
</style>
              

                <div class="fixed bottom-5 right-5">
    <a href="#top" class="bg-white dark:bg-gray-800 text-black dark:text-white p-4 rounded-lg shadow-lg font-bold transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-300 dark:hover:bg-gray-700">
        <span class="text-xl">⬆️</span>
    </a>
</div>

<style>
    /* Dark Mode Support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: black;
            color: white;
        }
    }

    /* General styles */
    body {
        font-family: 'Courier New', Courier, monospace;
        background-color: white;
        color: black;
        transition: background-color 0.5s, color 0.5s;
    }
</style>
              

                <div class="fixed bottom-5 right-5 z-50">
  <a href="#" class="flex items-center justify-center w-12 h-12 bg-blue-500 text-white rounded-full shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
    </svg>
  </a>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    .bg-blue-500 {
      background-color: #3b82f6;
    }
    .hover\:bg-blue-600:hover {
      background-color: #2563eb;
    }
  }
</style>
              

                <div class="fixed bottom-10 right-10 z-50">
    <a href="#top" class="bg-white dark:bg-gray-800 rounded-full shadow-lg p-3 transition-transform transform hover:scale-110"> 
        <img src="https://picsum.photos/50/50?random=1" alt="Back to Top" class="w-full h-full rounded-full">
    </a>
    <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white text-sm rounded-lg shadow-md p-2 mt-2 text-center">
        Back to Top
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white { background-color: #1f2937; }
    .bg-gray-200 { background-color: #4b5563; }
    .bg-gray-700 { background-color: #2d3748; }
    .text-gray-800 { color: #f7fafc; }
}
</style>