Buttons 구성 요소
파스텔 색조의 구성표가 있는 머티리얼 디자인 스타일로 디자인된 버튼 구성 요소로, 비즈니스/기업 웹사이트에 반응하며 어두운 테마를 지원합니다.
HTML 코드
<div class="flex flex-col space-y-4 p-4 max-w-md mx-auto">
<!-- Primary Button -->
<button class="bg-blue-400 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
Primary Button
</button>
<!-- Secondary Button -->
<button class="bg-green-400 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-green-600 dark:hover:bg-green-700">
Secondary Button
</button>
<!-- Disabled Button -->
<button class="bg-gray-300 text-gray-500 font-semibold py-2 px-4 rounded shadow-md cursor-not-allowed transition-opacity opacity-70 dark:bg-gray-700 dark:text-gray-400">
Disabled Button
</button>
<!-- Outline Button -->
<button class="border-2 border-blue-400 text-blue-400 font-semibold py-2 px-4 rounded hover:bg-blue-400 hover:text-white transition-colors dark:border-blue-600 dark:text-blue-600 dark:hover:bg-blue-600 dark:hover:text-white">
Outline Button
</button>
<!-- Icon Button -->
<button class="flex items-center bg-yellow-400 hover:bg-yellow-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-yellow-600 dark:hover:bg-yellow-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Icon" class="w-5 h-5 mr-2 rounded-full">
Icon Button
</button>
</div>관련 구성 요소
3D_Business_Buttons_Component
기업 웹 사이트에 적합한 따뜻한 일몰 색 구성표가 있는 반응형 3D 스타일 비즈니스 버튼 세트입니다. 다크 모드 지원 및 대화형 호버 효과가 포함됩니다.
Glassmorphism Buttons 컴포넌트
파스텔 색상과 Tailwind CSS를 사용하는 다크 모드를 지원하는 간단하고 반응이 빠른 Glassmorphism 버튼 구성 요소입니다.