CCHub Logo CCHub Tailwind Collection
구성 요소 단추 Buttons 구성 요소

Buttons 구성 요소

포트폴리오를 위한 그레이스케일 색 구성표의 Material Design 스타일 버튼으로, 어두운 테마를 지원하는 반응형 디자인이 특징입니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <h1 class="mb-8 text-3xl font-bold text-gray-800 dark:text-gray-200">Portfolio Showcase</h1>
  <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
    <div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/300/200" alt="Project 1" class="w-full h-48 object-cover rounded-md mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 1</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 1 goes here.</p>
      <a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
    </div>
    <div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/300/201" alt="Project 2" class="w-full h-48 object-cover rounded-md mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 2</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 2 goes here.</p>
      <a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
    </div>
    <div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/300/202" alt="Project 3" class="w-full h-48 object-cover rounded-md mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 3</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 3 goes here.</p>
      <a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
    </div>
  </div>
</div>

관련 구성 요소

Buttons 구성 요소

유사한 색 구성표와 어두운 모드를 지원하는 포트폴리오에 적합한 3D 스타일 버튼 구성 요소입니다.

열다

Buttons 구성 요소

미니멀리스트/플랫 디자인의 Buttons Component는 회색조 색 구성표를 사용합니다. 비즈니스/기업 웹 사이트에 적합하며 일부 대화형 기능으로 인해 중간 정도의 복잡성이 있습니다. 반응형이며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다

인터랙티브 사진 갤러리 단추

사진 갤러리 및 사진 작가 포트폴리오를 위해 설계된 반응형 대화형 버튼 세트로, 숲/녹색 색상 팔레트와 사용자 참여를 위한 미묘한 마이크로 상호 작용 효과가 특징입니다. 다크 모드 지원이 포함됩니다.

열다