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

관련 구성 요소

Buttons 구성 요소

파스텔 색조의 구성표가 있는 머티리얼 디자인 스타일로 디자인된 버튼 구성 요소로, 비즈니스/기업 웹사이트에 반응하며 어두운 테마를 지원합니다.

열다

Buttons 구성 요소

Tailwind CSS로 디자인된 미니멀한 버튼 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.

열다

Buttons 구성 요소

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

열다