구성 요소 맨 위로 이동 버튼 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>

Neumorphic 맨 위로 돌아가기 버튼

미리 보기

HTML 코드

관련 구성 요소

맨 위로 이동 버튼 구성 요소

Brutalism 맨 위로 돌아가기 버튼

아르 데코 맨 위로 이동 버튼