CCHub Logo CCHub Tailwind Collection
구성 요소 맨 위로 이동 버튼 맨 위로 이동 버튼 구성 요소

맨 위로 이동 버튼 구성 요소

머티리얼 디자인 원칙, 음소거된 색상, 어두운 모드 지원으로 스타일이 지정된 반응형 '맨 위로' 버튼 구성요소로, 블로그 또는 콘텐츠 소비 웹사이트에 적합합니다.

미리 보기

HTML 코드 

<div class="fixed bottom-4 right-4 z-50">
  <button
    onclick="window.scrollTo({top: 0, behavior: 'smooth'});"
    class="hidden md:flex items-center justify-center w-12 h-12 rounded-full shadow-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200
           hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500
           transition-all duration-300 ease-in-out transform hover:scale-110"
    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>

관련 구성 요소

맨 위로 이동 버튼 구성 요소

CRM/비즈니스 도구용 '맨 위로' 버튼은 고대비 색상의 바우하우스 스타일로 디자인되었으며, 다크 모드 지원을 포함하여 모든 화면 크기에 대한 기하학적 형태와 응답성을 특징으로 합니다.

열다

맨 위로 이동 버튼

사용자가 페이지를 아래로 스크롤할 때 표시되는 Material Design Back to Top 버튼입니다. 다크 모드 지원과 부드러운 스크롤이 포함됩니다.

열다

맨 위로 이동 버튼

화면의 오른쪽 아래 모서리에 고정된 것처럼 보이는 간단하고 우아한 맨 위로 이동 버튼입니다. 미묘한 파스텔 색조의 배색과 부드러운 호버링/포커스 마이크로 인터랙션이 특징입니다. 이 버튼에는 다크 모드 지원 기능이 내장된 반응형 디자인이 포함되어 있습니다. 마우스로 가리키면 버튼이 부드럽게 확장되고 배경색이 변경되어 시각적 피드백을 제공합니다. 구성 요소는 JavaScript가 필요하지 않은 Tailwind CSS 클래스만 사용합니다.

열다