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" 버튼 구성 요소입니다. 아래로 스크롤한 후 표시되며 부드러운 스크롤을 사용하여 클릭할 때 사용자를 페이지 맨 위로 되돌립니다. 스크롤에는 JavaScript가 사용되지 않고 CSS 만 사용됩니다.