맨 위로 이동 버튼 구성 요소
스큐어모픽 스타일로 디자인된 반응형 Back to Top 버튼은 어두운 테마 지원과 반응형 효과를 특징으로 합니다.
HTML 코드
<div class="fixed bottom-10 right-10 z-50">
<a href="#top" class="bg-white dark:bg-gray-800 rounded-full shadow-lg p-3 transition-transform transform hover:scale-110">
<img src="https://picsum.photos/50/50?random=1" alt="Back to Top" class="w-full h-full rounded-full">
</a>
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white text-sm rounded-lg shadow-md p-2 mt-2 text-center">
Back to Top
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white { background-color: #1f2937; }
.bg-gray-200 { background-color: #4b5563; }
.bg-gray-700 { background-color: #2d3748; }
.text-gray-800 { color: #f7fafc; }
}
</style>
관련 구성 요소
스큐어모픽 맨 위로 돌아가기 버튼
포럼/커뮤니티 플랫폼을 위한 간단하고 반응이 빠르며 스큐어모픽한 'Back to Top' 버튼 구성 요소로, 포레스트/그린 색상 팔레트와 완전한 다크 모드 지원으로 설계되었습니다.
맨 위로 이동 버튼 구성 요소
종이/인쇄물에서 영감을 받은 디자인, 트라이어딕 색 구성표 및 복잡한 시각적 요소를 갖춘 반응형 'Back to Top' 버튼 구성 요소로 전자 상거래 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.