맨 위로 이동 버튼
전자 상거래 웹 사이트를위한 Glassmorphism 디자인과 단색 색 구성표가있는 간단한 Back to Top 버튼.
HTML 코드
<div class="fixed bottom-10 right-10">
<a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-white bg-opacity-30 backdrop-blur-md shadow-lg hover:bg-opacity-50 transition duration-300 dark:bg-gray-800 dark:bg-opacity-50 dark:hover:bg-opacity-70">
<img src="https://picsum.photos/32" alt="Back to Top" class="w-8 h-8" />
</a>
</div>관련 구성 요소
맨 위로 이동 버튼
다크 모드를 지원하는 미니멀하고 반응이 빠른 "Back to Top" 버튼 구성 요소입니다. 아래로 스크롤한 후 표시되며 부드러운 스크롤을 사용하여 클릭할 때 사용자를 페이지 맨 위로 되돌립니다. 스크롤에는 JavaScript가 사용되지 않고 CSS 만 사용됩니다.
맨 위로 버튼 미니멀리스트 바이브런트
미니멀하고 평평한 Back to Top 버튼 구성 요소로, 생생한 색상으로 포트폴리오 웹 사이트에 적합합니다. 여기에는 Tailwind CSS를 사용하는 반응형 디자인과 다크 모드 지원이 포함됩니다.
맨 위로 이동 버튼
대시보드 인터페이스에 맞는 미니멀하고 플랫한 디자인의 Back to Top 버튼입니다. 버튼은 단색 색 구성표로 스타일이 지정되었으며 더 나은 상호 작용을 위한 호버 및 초점 효과가 포함되어 있습니다. 또한 반응이 빠르며 다크 모드를 지원합니다.