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

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

eコマースアプリケーション用のレトロ/ビンテージスタイルの「カートに追加」ボタンコンポーネント。このボタンは、80年代と90年代に触発されたノスタルジックなデザインで、類似の配色を使用し、インタラクティブ性のためのエフェクトを備えています。レスポンシブで、ダークテーマをサポートしています。

プレビュー

HTMLコード 

<div class="flex flex-col items-center">
    <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-pink-700">
        <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-t-lg" />
        <div class="mt-2 flex flex-col items-center">
            <p class="text-white text-lg font-bold dark:text-gray-300">Cool Retro Product</p>
            <span class="text-yellow-200 dark:text-yellow-300">$19.99</span>
            <button class="mt-4 bg-yellow-400 text-white py-2 px-4 rounded-full transition duration-300 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
                <span class="flex items-center justify-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
                    Add to Cart
                </span>
            </button>
        </div>
    </div>
</div>

関連コンポーネント

ブルータリズム カートに入れるボタン

シンプルなブルータリズムスタイルの「カートに追加」ボタンコンポーネントで、高コントラスト、補色、ソーシャルメディアの目的を備えています。ダークモードのサポートにより完全にレスポンシブ。

開ける

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

ブルータリズムにインスパイアされた Tailwind CSS の [カートに追加] ボタン コンポーネントで、ハイ コントラスト、珍しいレイアウト、レスポンシブ エフェクト、ダーク テーマのサポートが特徴です。

開ける

Industrial_AddToCartButton

政府/公共サービスWebサイト用のオーシャン/ブルートーンでデザインされたインダストリアルスタイルの「カートに追加」ボタンコンポーネント。露出した要素、実用的な美学、完全な応答性、およびダークモードのサポートを備えています。

開ける