구성 요소 맨 위로 이동 버튼 맨 위로 이동 버튼

맨 위로 이동 버튼

맨 위로 돌아가기 버튼 구성 요소에는 Tailwind CSS를 사용하여 3D 디자인, 생생한 색 구성표 및 소셜 미디어 인터페이스를 위한 복잡한 대화형 요소가 있습니다. 반응형 디자인과 어두운 테마 지원이 포함됩니다.

미리 보기

HTML 코드

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

맨 위로 이동 버튼

미리 보기

HTML 코드

관련 구성 요소

맨 위로 이동 버튼 구성 요소

맨 위로 버튼 미니멀리스트 바이브런트

스큐어모픽 맨 위로 돌아가기 버튼