구성 요소 장바구니에 추가 버튼 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>

Add to Cart Button 컴포넌트

미리 보기

HTML 코드

관련 구성 요소

Industrial_AddToCartButton

Glassmorphism 장바구니에 추가 버튼

장바구니에 추가 버튼 구성 요소 - 멤피스 그레이스케일 날씨