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

Buttons 구성 요소

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

미리 보기

HTML 코드 

<div class="flex flex-wrap justify-center gap-4 p-4">
  <!-- Primary Button -->
  <button class="px-6 py-3 font-semibold text-white bg-gray-800 rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50
                     dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-300">
    Primary Button
  </button>

  <!-- Secondary Button -->
  <button class="px-6 py-3 font-semibold text-gray-800 bg-white border border-gray-300 rounded-md shadow-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
                     dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
    Secondary Button
  </button>

  <!-- Tertiary Button -->
  <button class="px-6 py-3 font-semibold text-gray-600 bg-transparent rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
                     dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
    Tertiary Button
  </button>

  <!-- Disabled Button -->
  <button class="px-6 py-3 font-semibold text-gray-400 bg-gray-200 rounded-md cursor-not-allowed
                     dark:bg-gray-700 dark:text-gray-600" disabled>
    Disabled Button
  </button>

  <!-- Button with Icon -->
  <button class="flex items-center px-6 py-3 font-semibold text-white bg-gray-800 rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50
                     dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-300">
    <svg class="w-5 h-5 mr-2" 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="M12 4v16m8-8H4"></path></svg>
    Button with Icon
  </button>

  <!-- Outline Button with Icon -->
  <button class="flex items-center px-6 py-3 font-semibold text-gray-800 bg-white border border-gray-300 rounded-md shadow-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
                     dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
    <svg class="w-5 h-5 mr-2" 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
    Outline Button with Icon
  </button>
</div>

관련 구성 요소

Buttons 구성 요소

다크 모드를 지원하는 반응형 버튼 구성 요소로, 전자 상거래에 적합하며 간단한 트라이어딕 색 구성표를 특징으로 합니다.

열다

유쾌한 엔터테인먼트 버튼

엔터테인먼트 또는 미디어 플랫폼을 위해 디자인된 재미있고 재미있는 버튼 세트로, 차분하거나 채도가 낮은 색상과 둥근 요소를 특징으로 합니다. 반응형이며 다크 모드 지원이 포함됩니다.

열다

Retro_Rainbow_Buttons_Component

사진 갤러리 및 포트폴리오를 위해 설계된 레트로 테마의 그라디언트 무지개 버튼 컬렉션으로, 적당한 복잡성과 완전한 반응성 및 다크 모드를 지원합니다.

열다