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

Buttons 구성 요소

Tailwind CSS로 디자인된 미니멀한 버튼 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="flex flex-wrap space-x-4 justify-center p-6">
    <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Primary Button
    </button>
    <button class="bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Secondary Button
    </button>
    <button class="bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Success Button
    </button>
    <button class="bg-red-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Danger Button
    </button>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-blue-500 { background-color: #2563eb; }
        .bg-gray-300 { background-color: #4b5563; }
        .bg-green-500 { background-color: #22c55e; }
        .bg-red-500 { background-color: #ef4444; }
        .text-white { color: #ffffff; }
        .text-gray-800 { color: #f9fafb; }
        .shadow-md { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
    }
</style>

관련 구성 요소

Buttons 구성 요소

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

열다

아르데코 네온 버튼

아르데코 기하학적 스타일과 생생한 네온/전기 색 구성표가 있는 단순하고 반응이 빠른 버튼 구성 요소로 의료 응용 분야에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

3D_Healthcare_Buttons_Component

의료 애플리케이션을 위한 복잡한 3D에서 영감을 받은 버튼 구성 요소로, 밝은 액센트 색상, 반응형 레이아웃 및 다크 모드 지원이 있는 흑백 단색 디자인을 특징으로 합니다.

열다