Buttons 구성 요소
포트폴리오에 대한 다크 모드를 지원하는 반응형 버튼 구성 요소입니다. 적당한 복잡성과 함께 회색조의 미니멀한 플랫 디자인이 특징입니다.
HTML 코드
<div class="flex flex-col items-center justify-center gap-4 p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">
<!-- Primary Button -->
<button class="px-6 py-3 text-lg font-semibold text-white bg-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
Primary Action
</button>
<!-- Secondary Button -->
<button class="px-6 py-3 text-lg font-semibold text-gray-800 bg-transparent border-2 border-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
Secondary Action
</button>
<!-- Tertiary Button (Icon only example) -->
<button class="flex items-center justify-center w-12 h-12 text-gray-800 bg-transparent border-2 border-gray-800 rounded-full shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button>
<!-- Responsive Example (adjusts layout on larger screens) -->
<div class="flex flex-col md:flex-row items-center justify-center gap-4 w-full">
<button class="w-full md:w-auto px-6 py-3 text-lg font-semibold text-white bg-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
Responsive Button 1
</button>
<button class="w-full md:w-auto px-6 py-3 text-lg font-semibold text-gray-800 bg-transparent border-2 border-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
Responsive Button 2
</button>
</div>
</div>관련 구성 요소
3D_Business_Buttons_Component
기업 웹 사이트에 적합한 따뜻한 일몰 색 구성표가 있는 반응형 3D 스타일 비즈니스 버튼 세트입니다. 다크 모드 지원 및 대화형 호버 효과가 포함됩니다.
Buttons 구성 요소
종이/인쇄에서 영감을 받은 그레이스케일 디자인의 간단하고 반응이 빠른 버튼 구성 요소로, 교육 플랫폼에 적합하며 라이트 모드와 다크 모드를 지원합니다.