구성 요소 단추 Buttons 구성 요소

Buttons 구성 요소

머티리얼 디자인(Material Design)으로 스타일이 지정된 간단한 버튼 구성 요소로, 단색 색 구성표를 사용하고 다크 모드를 지원하여 비즈니스/기업 웹 사이트에 적합합니다.

미리 보기

HTML 코드

<div class="flex flex-col items-center space-y-4 p-6 bg-gray-100 dark:bg-gray-800">
    <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Buttons Component</h2>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Primary Button</button>
        <button class="px-6 py-2 rounded border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-800 dark:text-blue-200 dark:hover:bg-blue-800 dark:hover:text-white">Secondary Button</button>
    </div>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-gray-300 text-gray-800 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">Tertiary Button</button>
        <button class="px-6 py-2 rounded bg-transparent border border-gray-300 text-gray-800 hover:bg-gray-300 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700">Outlined Button</button>
    </div>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Large Button</button>
        <button class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Medium Button</button>
        <button class="px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Small Button</button>
    </div>
</div>

관련 구성 요소

Buttons 구성 요소

트라이어딕 색 구성표, 단순한 복잡성 및 다크 모드를 지원하는 반응형 디자인을 갖춘 레트로 빈티지 테마 버튼 구성 요소로 블로그 또는 콘텐츠 웹 사이트에 적합합니다.

열다

Buttons 구성 요소

작품이나 제품을 선보이는 포트폴리오를 위해 설계된 미니멀리스트 버튼 구성 요소로, Tailwind CSS를 사용하여 어두운 테마를 지원하는 생생한 색상과 반응형 디자인을 특징으로 합니다.

열다

Gradient_Weather_Buttons

일기 예보 및 기후 데이터를 위한 반응형 버튼 세트로, 부드러운 호버 전환 및 다크 모드 지원과 함께 보라색/보라색 그라디언트를 특징으로 합니다.

열다