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

맨 위로 이동 버튼 구성 요소

스큐어모픽 스타일로 디자인된 반응형 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>

관련 구성 요소

맨 위로 이동 버튼 - Material Design Pastel

반응형 "Back to Top" 버튼 구성 요소로, 파스텔 색 구성표와 함께 Material Design 원칙을 따르며 포트폴리오 웹 사이트에 맞게 조정되었습니다. 여기에는 Tailwind CSS를 사용하는 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다

맨 위로 이동 버튼 구성 요소

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

열다

맨 위로 이동 버튼

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

열다