カートに入れるボタンコンポーネント
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>関連コンポーネント
カートに入れるボタンコンポーネント
ソーシャルメディアインターフェース用に設計された3Dスタイルの「カートに追加」ボタンコンポーネント。深みのある魅力的なデザイン要素を備えた豊富なインターフェイスが特徴で、ダークテーマのサポートで応答性があります。
カートに入れるボタン
スキューモーフィック要素、鮮やかな色、ダークテーマのサポートで設計されたレスポンシブな [カートに追加] ボタン コンポーネントで、ブログやコンテンツの消費目的に適しています。