Glassmorphism 장바구니에 추가 버튼
Add to Cart Button with Glassmorphism 스타일, 단색 색 구성표 및 중간 정도의 복잡성. 다크 모드 지원으로 반응형.
HTML 코드
<button class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg border border-gray-200 border-opacity-10 text-gray-800 px-6 py-3 rounded-md font-semibold transition duration-300 ease-in-out hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-20 dark:text-white dark:hover:bg-opacity-40 dark:focus:ring-gray-700 dark:focus:ring-opacity-50"> Add to Cart </button>관련 구성 요소
Add to Cart Button 컴포넌트
머티리얼 디자인 원칙에 따라 스타일링된 반응형 '장바구니에 추가' 버튼 구성요소로, 트라이어딕 색 구성표가 특징이며 다크 모드를 지원합니다. 대시보드용으로 설계된 이 제품에는 수량 선택기가 포함되어 있으며 그림자 및 애니메이션에 Tailwind CSS를 사용하여 깊이 효과를 통합합니다.
Add to Cart Button 컴포넌트
여행/관광 웹사이트를 위한 반응형 '장바구니에 담기' 버튼 구성 요소로, 따뜻한 일몰 톤의 종이/인쇄 디자인에서 영감을 받았습니다. 다크 모드 지원과 미묘한 인터랙티브 효과가 포함되어 있습니다.