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

Add to Cart Button 컴포넌트

반응형 '장바구니에 담기' 버튼 구성 요소로, 트라이어딕 색상, 마이크로 인터랙션 포커스, 전자 상거래 애플리케이션을 위한 다크 모드 지원이 있습니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="group relative flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold
    bg-emerald-500 text-white
    hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700
    transition-all duration-300 ease-in-out
    overflow-hidden
    shadow-lg hover:shadow-xl
    dark:bg-emerald-600 dark:hover:bg-emerald-700">
    <span class="relative z-10 transition-transform duration-300 ease-in-out group-hover:-translate-x-full opacity-100 group-hover:opacity-0 whitespace-nowrap">
      Add to Cart
    </span>
    <span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
      transition-transform duration-300 ease-in-out
      text-purple-200 dark:text-purple-300
      bg-purple-600 dark:bg-purple-700
      rounded-full
      scale-y-0 group-hover:scale-y-100
      opacity-0 group-hover:opacity-100
      group-hover:px-6 group-hover:py-3">
      <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
      </svg>
      Added!
    </span>
    <span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
      transition-transform duration-300 ease-in-out delay-150
      text-orange-200 dark:text-orange-300
      bg-orange-500 dark:bg-orange-600
      rounded-full
      scale-y-0 group-hover:scale-y-100
      opacity-0 group-hover:opacity-100
      group-hover:px-6 group-hover:py-3
      hidden">
      <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.703.707 1.703H17m0-10a2 2 0 110 4 2 2 0 010-4zm-7 4a2 2 0 110 4 2 2 0 010-4z" />
      </svg>
      Adding...
    </span>
  </button>
</div>

관련 구성 요소

Add to Cart Button 컴포넌트

머티리얼 디자인 원칙에 따라 스타일링된 반응형 '장바구니에 추가' 버튼 구성요소로, 트라이어딕 색 구성표가 특징이며 다크 모드를 지원합니다. 대시보드용으로 설계된 이 제품에는 수량 선택기가 포함되어 있으며 그림자 및 애니메이션에 Tailwind CSS를 사용하여 깊이 효과를 통합합니다.

열다

Add to Cart Button 컴포넌트

레트로/빈티지 미학과 보색으로 디자인된 복잡한 장바구니에 담기 버튼은 전문 회사 웹사이트에 적합합니다. 이 구성 요소는 다크 모드를 지원하며 스타일링에 Tailwind CSS를 활용하여 반응형입니다.

열다

장바구니에 추가 버튼

반응형 Add to Cart 버튼 구성 요소는 스큐어모픽 요소, 생생한 색상 및 어두운 테마 지원으로 디자인되어 블로그 및 콘텐츠 소비 목적에 적합합니다.

열다