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

Add to Cart Button 컴포넌트

전자 상거래 애플리케이션을 위한 레트로/빈티지 스타일의 '장바구니에 추가' 버튼 구성 요소입니다. 이 버튼은 80년대와 90년대에서 영감을 받은 향수를 불러일으키는 디자인을 가지고 있으며, 유사한 색 구성표를 사용하고 상호 작용 효과를 제공합니다. 반응형이며 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center">
    <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-pink-700">
        <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-t-lg" />
        <div class="mt-2 flex flex-col items-center">
            <p class="text-white text-lg font-bold dark:text-gray-300">Cool Retro Product</p>
            <span class="text-yellow-200 dark:text-yellow-300">$19.99</span>
            <button class="mt-4 bg-yellow-400 text-white py-2 px-4 rounded-full transition duration-300 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
                <span class="flex items-center justify-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
                    Add to Cart
                </span>
            </button>
        </div>
    </div>
</div>

관련 구성 요소

레트로 장바구니에 담기 버튼

반응형 '장바구니에 추가' 버튼에는 레트로/빈티지 디자인, 보색 구성표, 대시보드 목적을 위한 적당한 복잡성이 있습니다. 다크 모드를 지원합니다.

열다

Add to Cart Button 컴포넌트

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

열다

Add to Cart Button 컴포넌트

장바구니에 추가 버튼: 어스 톤, 색상 구성표 및 복잡한 복잡성 수준이 있는 다크 모드 UI용으로 설계된 포트폴리오 목적입니다. 이 구성 요소는 반응형이며 Tailwind의 dark: 접두사를 사용하여 어두운 테마를 지원합니다.

열다