Glassmorphism Buttons 컴포넌트
파스텔 색상과 Tailwind CSS를 사용하는 다크 모드를 지원하는 간단하고 반응이 빠른 Glassmorphism 버튼 구성 요소입니다.
HTML 코드
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="flex space-x-4">
<button class="px-6 py-3 text-lg font-semibold text-white bg-pink-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-pink-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
Button 1
</button>
<button class="px-6 py-3 text-lg font-semibold text-white bg-blue-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-blue-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
Button 2
</button>
</div>
</div>관련 구성 요소
ArtDecoECommerceButtons
아르데코에서 영감을 받은 복잡한 전자 상거래 버튼 세트는 기하학적 패턴과 고급스러운 오션/블루 톤으로 반응성과 다크 모드에 최적화되어 있습니다.
아르데코 네온 버튼
아르데코 기하학적 스타일과 생생한 네온/전기 색 구성표가 있는 단순하고 반응이 빠른 버튼 구성 요소로 의료 응용 분야에 적합합니다. 다크 모드 지원이 포함됩니다.