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 컴포넌트

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

열다

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

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

열다

Add to Cart Button 컴포넌트

헬스케어/의료 애플리케이션을 위한 복잡한 '장바구니에 담기' 버튼 구성 요소로, 스위스/인터내셔널 타이포그래피와 어스 톤에서 영감을 받았습니다. 타이포그래피와 그리드 시스템에 중점을 둔 깔끔하고 미니멀한 디자인이 특징이며, 완전한 응답성과 다크 모드 지원을 제공합니다.

열다