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

Buttons 구성 요소

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

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center h-screen bg-white dark:bg-gray-900 p-4">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Portfolio Buttons</h1>
    <div class="space-y-4">
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 text-lg font-medium text-white bg-red-500 rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-200">View Projects</a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 text-lg font-medium text-white bg-green-500 rounded hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 transition duration-200">Contact Me</a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 text-lg font-medium text-white bg-blue-500 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-200">Download CV</a>
    </div>
</div>

관련 구성 요소

뉴모피즘 소셜 미디어 버튼

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

열다

Buttons 구성 요소

Skeuomorphism Analogous Complex Dashboard Buttons 반응형 디자인과 어두운 테마를 지원하는 구성 요소.

열다

Skeuomorphic_Social_Buttons

소셜 미디어 인터페이스를 위해 설계된 생생한 색 구성표를 가진 복잡한 스큐어모픽 버튼 세트입니다. 반응형 레이아웃과 다크 모드 지원이 포함되어 있어 실제 버튼을 모방합니다.

열다