Neumorphic Buttons 컴포넌트
반응형 효과와 Tailwind CSS를 사용하는 어두운 테마 지원이 있는 뉴모픽 디자인 스타일을 특징으로 하는 버튼 구성 요소입니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<h2 class="mb-4 text-2xl font-bold dark:text-white">Neumorphic Buttons</h2>
<div class="flex space-x-4">
<button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
<span class="text-gray-900 dark:text-gray-200">Button 1</span>
<div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
</button>
<button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
<span class="text-gray-900 dark:text-gray-200">Button 2</span>
<div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
</button>
<button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
<span class="text-gray-900 dark:text-gray-200">Button 3</span>
<div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
</button>
</div>
</div>
관련 구성 요소
아르 데코 부동산 버튼 구성 요소
부동산 플랫폼을 위한 복잡한 아르데코에서 영감을 받은 버튼 구성 요소로, 기하학적 패턴, 고급스러운 그레이스케일 스타일, 다양한 인터랙티브 요소를 특징으로 하며 완전한 응답성과 다크 모드를 지원합니다.
Gradient_Weather_Buttons
일기 예보 및 기후 데이터를 위한 반응형 버튼 세트로, 부드러운 호버 전환 및 다크 모드 지원과 함께 보라색/보라색 그라디언트를 특징으로 합니다.