カートに入れるボタン

Tailwind CSSでデザインされたSkeuomorphicの「Add to Cart」ボタンコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。

プレビュー

HTMLコード

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex items-center space-x-4 transition-transform transform hover:scale-105">
        <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-lg shadow">
        <div class="flex-1">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product Name</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        </div>
        <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-blue-400 transition duration-200">
            Add to Cart
        </button>
    </div>
</div>

関連コンポーネント

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

ソーシャルメディアインターフェース用に設計された3Dスタイルの「カートに追加」ボタンコンポーネント。深みのある魅力的なデザイン要素を備えた豊富なインターフェイスが特徴で、ダークテーマのサポートで応答性があります。

開ける

カートに入れるボタン

スキューモーフィックなスタイルでデザインされたレスポンシブな「カートに入れる」ボタンコンポーネントで、鮮やかな色とダークテーマのサポートがあり、ソーシャルメディアインターフェースに適しています。

開ける

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

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

開ける