검색 구성 요소

카테고리

구성 요소 맨 위로 이동 버튼

맨 위로 이동 버튼

페이지를 다시 맨 위로 스크롤하는 단추

맨 위로 이동 버튼 구성 요소

마이크로 인터랙션과 생생한 색상으로 설계된 반응형 맨 위로 돌아가기 버튼은 다크 모드를 지원하는 대시보드 인터페이스에 적합합니다.

                <div class="fixed bottom-4 right-4">
    <button class="bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-full p-3 shadow-lg hover:scale-110 transition-transform duration-300 dark:from-purple-800 dark:to-pink-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m0 0l-4-4m4 4l4-4" />
        </svg>
    </button>
</div>

맨 위로 이동 버튼

전자 상거래 웹 사이트를 위한 미니멀한 플랫 디자인 Back to Top 버튼 구성 요소로, 회색조 색 구성표와 어두운 테마를 지원하는 반응형 디자인을 활용합니다.

열다 미리 보기

                <div class="fixed bottom-5 right-5 z-50">
    <button class="bg-gray-800 text-white rounded-full p-3 shadow-md hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400 transition-all duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </button>
</div>

맨 위로 이동 버튼

다크 모드를 지원하는 미니멀하고 반응이 빠른 "Back to Top" 버튼 구성 요소입니다. 아래로 스크롤한 후 표시되며 부드러운 스크롤을 사용하여 클릭할 때 사용자를 페이지 맨 위로 되돌립니다. 스크롤에는 JavaScript가 사용되지 않고 CSS 만 사용됩니다.

열다 미리 보기

                <div class="fixed bottom-4 right-4">
  <a href="#" class="bg-blue-500 text-white p-3 rounded-full shadow-md transition-opacity duration-300 opacity-0 group-hover:opacity-100 dark:bg-blue-700 dark:text-gray-200">
    <svg class="w-6 h-6" 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>
  /* This simple example uses CSS for smooth scrolling. For a production site, you might use a small amount of JavaScript for better compatibility and control over the scroll behavior and when the button appears. */
  html {
    scroll-behavior: smooth;
  }

  /* Basic example to show/hide the button based on scroll position. 
     A robust solution would involve JavaScript Intersection Observer or scroll events. */
  body:before {
    content: "";
    height: 200vh; /* Simulate a long page */
    display: block;
  }

  .group-hover\:opacity-100:hover + .fixed a {
      opacity: 1; /* This part is flawed for demonstrating scroll-based visibility without JS */
  }

  /* A better approach for scroll-based visibility would require JavaScript */
  .fixed a {
      /* Initially hidden, JS would make it visible on scroll */
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
  }


</style>

맨 위로 버튼 미니멀리스트 바이브런트

미니멀하고 평평한 Back to Top 버튼 구성 요소로, 생생한 색상으로 포트폴리오 웹 사이트에 적합합니다. 여기에는 Tailwind CSS를 사용하는 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <a href="#" class="fixed bottom-6 right-6 bg-blue-500 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300 dark:bg-blue-700 dark:hover:bg-blue-900">
  <svg class="w-6 h-6" 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>

맨 위로 이동 버튼

대시보드 인터페이스에 맞는 미니멀하고 플랫한 디자인의 Back to Top 버튼입니다. 버튼은 단색 색 구성표로 스타일이 지정되었으며 더 나은 상호 작용을 위한 호버 및 초점 효과가 포함되어 있습니다. 또한 반응이 빠르며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="fixed bottom-8 right-8">
    <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-600 text-white shadow-lg transition-all ease-in-out duration-300 hover:bg-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </a>
</div>

맨 위로 이동 버튼 구성 요소

포트폴리오 웹 사이트에 적합한 Tailwind CSS를 사용하여 브루탈리즘 스타일로 디자인된 간단한 맨 위로 돌아가기 버튼입니다. 회색조 색 구성표와 어두운 테마 지원이 특징입니다.

열다 미리 보기

                <div class="fixed bottom-5 right-5 z-50">
    <a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800 text-white hover:bg-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 transition-all duration-300 shadow-lg">
        ⬆️
    </a>
</div>

<div class="h-screen bg-gray-100 dark:bg-gray-800" id="top">
    <div class="container mx-auto p-5">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Portfolio</h1>
        <p class="text-gray-700 dark:text-gray-300">Showcasing my work and products.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-5">
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/200" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/201" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/202" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
        </div>
    </div>
</div>

Brutalism 맨 위로 돌아가기 버튼

맨 위로 돌아가기 버튼 Brutalism 스타일, Triadic 색 구성표 및 복잡한 복잡성을 가진 구성 요소. 어두운 테마를 지원하는 반응형 디자인. 자바스크립트가 없습니다.

열다 미리 보기

                <a href="#" class="fixed bottom-4 right-4 bg-red-500 dark:bg-cyan-500 text-yellow-300 dark:text-magenta-500 p-4 rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-cyan-500 border-4 border-black dark:border-white z-50">
    <svg class="w-6 h-6" 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>

맨 위로 이동 버튼 - Material Design Pastel

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

열다 미리 보기

                <button class="fixed bottom-5 right-5 bg-pink-300 text-white p-3 rounded-full shadow-lg transition-opacity hover:opacity-75 focus:outline-none dark:bg-pink-700 dark:text-gray-200">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
  </svg>
</button>

맨 위로 이동 버튼

전문 비즈니스 웹 사이트에 적합한 유리 모피즘 효과로 설계된 반응형 Back to Top 버튼 구성 요소입니다. 최소한의 요소로 구성된 간단한 레이아웃이 특징이며 밝은 테마와 어두운 테마 모두에서 잘 작동합니다.

열다 미리 보기

                <div class="fixed bottom-5 right-5">
    <a href="#" class="bg-white bg-opacity-30 backdrop-blur-md border border-gray-200 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-600 text-gray-800 dark:text-gray-200 rounded-full p-3 shadow-lg hover:shadow-2xl transition-transform transform hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </a>
</div>

브루탈리스트 맨 위로

회색조와 Tailwind CSS를 사용하는 브루탈리즘 Back to Top 버튼 컴포넌트입니다. 반응이 빠르며 다크 모드를 지원합니다.

열다 미리 보기

                <button class="fixed bottom-4 right-4 bg-black text-white border-2 border-black group dark:bg-white dark:text-black dark:border-white">
  <span class="block px-6 py-3 text-xl font-bold group-hover:-translate-x-2 group-hover:-translate-y-2 transition-all">
    ⬆️
  </span>
</button>