CCHub Logo CCHub Tailwind Collection
구성 요소 맨 위로 이동 버튼 Neumorphic 맨 위로 돌아가기 버튼

Neumorphic 맨 위로 돌아가기 버튼

전자 상거래를 위한 뉴모픽 "Back to Top" 버튼은 섬세한 그림자를 사용하여 배경과 조화를 이루는 미묘하고 부드러운 UI 디자인을 제공합니다. 조화로운 모양을 위한 유사한 색상, 단순한 레이아웃, 어두운 테마를 지원하는 반응형 디자인이 특징이며 온라인 쇼핑 경험에 이상적입니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <a href="#" class="back-to-top-button relative p-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center transition-all duration-300 hover:shadow-neumorphic-light-hover dark:hover:shadow-neumorphic-dark-hover"
    aria-label="Back to top">
    <svg class="w-6 h-6 text-indigo-600 dark:text-purple-400" 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>
  </a>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #cbced1, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
  }

  .shadow-neumorphic-light-hover {
    box-shadow: inset 6px 6px 12px #cbced1, inset -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-dark-hover {
    box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #2e2e2e;
  }
</style>

관련 구성 요소

맨 위로 이동 버튼 구성 요소

미니멀하고 평평한 Back to Top Button Component는 대시보드를 위한 것으로, 단색 색 구성표를 특징으로 합니다. 인터랙티브 기능, 반응형 디자인, 어두운 테마 지원으로 적당히 복잡하며 순전히 HTML 및 Tailwind CSS로 구축되었습니다.

열다

맨 위로 이동 버튼

Neumorphic 디자인, 단색 색 구성표 및 다크 모드를 지원하는 맨 위로 돌아가기 버튼. Tailwind CSS를 사용합니다.

열다

맨 위로 이동 버튼 구성 요소

음식/레스토랑 웹사이트를 위해 디자인된 단순하고 예술적인 'Back to Top' 버튼은 수채화에서 영감을 받은 그레이스케일 미학을 특징으로 합니다. 반응이 빠르고 다크 모드를 지원합니다.

열다