구성 요소 단추 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 구성 요소

CRM/비즈니스 도구 애플리케이션을 위한 대화형 버튼 세트로, 마이크로 인터랙션, 보석 톤 색상 및 다크 모드 지원을 통한 완전한 응답성을 제공합니다.

열다

Skeuomorphic_Social_Buttons

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

열다

Buttons 구성 요소

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

열다