CCHub Logo CCHub Tailwind Collection
コンポーネント カートに入れるボタン カートに入れるボタンコンポーネント

カートに入れるボタンコンポーネント

3 つの要素、マイクロインタラクション フォーカス、e コマース アプリケーション向けのダーク モードのサポートを備えたレスポンシブな [カートに追加] ボタン コンポーネント。

プレビュー

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>

関連コンポーネント

カートに入れるボタンコンポーネント

自然にインスパイアされた、キャンディーカラーの「カートに追加」ボタンコンポーネントは、フォーラム/コミュニティプラットフォーム向けに設計されており、流れるような有機的なスタイルが特徴です。応答性が高く、ダークモードをサポートしています。

開ける

カートに入れるボタンコンポーネント

カートに入れるボタン ダークモードUI用に設計されており、アーストーンの配色と複雑な複雑さのレベルを備えています。このコンポーネントはレスポンシブで、Tailwind の dark: プレフィックスを使用してダーク テーマをサポートします。

開ける

Organic_Nature_Add_To_Cart_Button

オーガニック/自然にインスパイアされた「カートに追加」ボタンコンポーネントで、補色スキームで、教育プラットフォームに適しています。流れるようなライン、微妙なインタラクティブ要素、完全な応答性、ダークモードのサポートが特徴です。

開ける