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

Add to Cart Button 컴포넌트

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

미리 보기

HTML 코드 

<div class="flex justify-center items-center p-4 bg-gray-50 dark:bg-gray-900 min-h-screen">
  <button class="group relative overflow-hidden h-12 w-48 rounded-full bg-gradient-to-r from-orange-500 to-red-500 text-white font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-4 focus:ring-red-400 focus:ring-opacity-75 dark:from-orange-600 dark:to-red-600 dark:hover:shadow-2xl dark:focus:ring-red-500">
    <span class="relative z-10 flex items-center justify-center space-x-2 transition-transform duration-300 group-hover:scale-105 group-active:scale-95">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
      </svg>
      <span>Add to Cart</span>
    </span>
    <span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 group-hover:opacity-10 dark:bg-gray-800"></span>
    <span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 group-active:opacity-20 dark:bg-gray-800"></span>
  </button>
</div>

관련 구성 요소

Brutalism 장바구니에 담기 버튼

단순하고 브루탈리즘 스타일의 '장바구니에 추가' 버튼 구성 요소로, 높은 대비, 보색, 소셜 미디어에 적합합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

장바구니에 추가 버튼

반응형 Add to Cart 버튼 구성 요소는 생생한 색상과 어두운 테마를 지원하여 소셜 미디어 인터페이스에 적합한 스큐어모픽 스타일로 설계되었습니다.

열다

Add to Cart Button 컴포넌트

소셜 미디어 인터페이스용으로 설계된 3D 스타일의 '장바구니에 추가' 버튼 구성 요소입니다. 깊이가 있는 풍부한 인터페이스, 매력적인 디자인 요소가 특징이며 어두운 테마 지원으로 반응합니다.

열다