CCHub Logo CCHub Tailwind Collection
구성 요소 장바구니에 추가 버튼 장바구니에 추가 버튼

장바구니에 추가 버튼

Tailwind CSS로 디자인된 스큐어모픽 '장바구니에 담기' 버튼 컴포넌트로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex items-center space-x-4 transition-transform transform hover:scale-105">
        <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-lg shadow">
        <div class="flex-1">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product Name</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        </div>
        <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-blue-400 transition duration-200">
            Add to Cart
        </button>
    </div>
</div>

관련 구성 요소

브루탈리즘 파스텔 장바구니에 담기 버튼

브루탈리즘에서 영감을 받은 장바구니에 담기 버튼은 파스텔 색조, 적당한 복잡성, 다크 모드를 지원하는 반응형 디자인을 갖추고 있습니다. 블로그 또는 콘텐츠 웹 사이트에 적합합니다.

열다

Industrial_AddToCartButton

정부/공공 서비스 웹사이트를 위해 바다/파란색 톤으로 디자인된 인더스트리얼 스타일의 '장바구니에 담기' 버튼 구성 요소입니다. 노출된 요소, 실용적인 미학, 완전한 반응성 및 다크 모드 지원이 특징입니다.

열다

Add to Cart Button 컴포넌트

Tailwind CSS를 사용하여 어두운 모드에서 설계된 반응형 '장바구니에 추가' 버튼은 호버 효과 및 어두운 테마를 지원합니다.

열다