구성 요소 단추 Buttons 구성 요소

Buttons 구성 요소

유사한 색 구성표와 어두운 모드를 지원하는 포트폴리오에 적합한 3D 스타일 버튼 구성 요소입니다.

미리 보기

HTML 코드

<div class="flex flex-col items-center justify-center mt-10 space-y-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Showcase Your Work</h2>
    <div class="flex space-x-4">
        <a href="#" class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Portfolio</a>
        <a href="#" class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Products</a>
        <a href="#" class="bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Contact</a>
    </div>
</div>

<div class="flex flex-col items-center justify-center mt-10 space-y-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Our Team</h2>
    <div class="flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
        <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
    </div>
</div>

<div class="flex flex-col items-center justify-center mt-10 space-y-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Portfolio Preview</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <img src="https://picsum.photos/id/1011/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
        <img src="https://picsum.photos/id/1012/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
        <img src="https://picsum.photos/id/1013/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
    </div>
</div>

관련 구성 요소

Buttons 구성 요소

다양한 동작을 위한 미니멀하고 평평한 디자인의 버튼 모음으로, 보색 구성표를 사용합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

ArtDecoECommerceButtons

아르데코에서 영감을 받은 복잡한 전자 상거래 버튼 세트는 기하학적 패턴과 고급스러운 오션/블루 톤으로 반응성과 다크 모드에 최적화되어 있습니다.

열다

뉴모피즘 소셜 미디어 버튼

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

열다