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>

관련 구성 요소

뉴모피즘 소셜 미디어 버튼

소셜 미디어 인터페이스를 위한 간단한 뉴모피즘(Neumorphism) 스타일의 버튼 컴포넌트로, Tailwind CSS를 사용하여 반응형 디자인과 다크 모드를 지원합니다. 이 버튼은 아날로그 색 구성표와 미묘한 그림자를 사용하여 부드럽고 돌출된 모양을 만듭니다.

열다

Brutalism Buttons 구성 요소

브루탈리즘 디자인의 버튼 구성 요소로, 채도가 높은 색상, 반응형 레이아웃 및 다크 모드 지원을 특징으로 하며 비즈니스 및 기업 웹 사이트에 적합합니다.

열다

Neumorphic Buttons 컴포넌트

반응형 효과와 Tailwind CSS를 사용하는 어두운 테마 지원이 있는 뉴모픽 디자인 스타일을 특징으로 하는 버튼 구성 요소입니다.

열다