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

Buttons 구성 요소

열다

Buttons 구성 요소

대시보드를 위한 미니멀한 버튼 구성 요소로, 반응형 디자인과 어두운 테마를 지원합니다.

열다

Buttons 구성 요소

포트폴리오에 대한 다크 모드를 지원하는 반응형 버튼 구성 요소입니다. 적당한 복잡성과 함께 회색조의 미니멀한 플랫 디자인이 특징입니다.

열다