CCHub Logo CCHub Tailwind Collection
구성 요소 장바구니에 추가 버튼 Add to Cart Button 컴포넌트

Add to Cart Button 컴포넌트

Tailwind CSS를 사용하여 생생한 색상, 반응형 디자인 및 어두운 테마를 지원하는 3D 스타일의 장바구니에 추가 버튼 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex justify-center items-center p-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 transform transition-transform hover:scale-105">
        <div class="flex justify-between items-center mb-4">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-16 h-16 rounded-full border-2 border-violet-600 shadow-lg">
            <div class="ml-4">
                <h2 class="text-lg font-bold text-violet-700 dark:text-violet-300">Product Name</h2>
                <p class="text-md text-gray-600 dark:text-gray-300">$49.99</p>
            </div>
        </div>
        <button class="w-full bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-600 text-white font-bold py-2 px-4 rounded-lg shadow-2xl transform hover:translate-y-1 transition-all duration-200 ease-in-out">
            Add to Cart
        </button>
    </div>
</div>

관련 구성 요소

Add to Cart Button 컴포넌트

매력적인 마이크로 인터랙션, 일몰/따뜻한 톤, 음식/레스토랑 웹사이트에 적합, 호버/클릭 및 다크 모드 지원 시 미묘한 애니메이션 기능이 있는 반응형 '장바구니에 추가' 버튼.

열다

Add to Cart Button 컴포넌트

Tailwind CSS가 포함된 잔인함에서 영감을 받은 장바구니에 담기 버튼 구성 요소는 고대비, 특이한 레이아웃, 반응형 효과 및 어두운 테마 지원을 특징으로 합니다.

열다

Glassmorphism 장바구니에 추가 버튼

Add to Cart Button with Glassmorphism 스타일, 단색 색 구성표 및 중간 정도의 복잡성. 다크 모드 지원으로 반응형.

열다