カートに入れるボタンコンポーネント
自然にインスパイアされた、キャンディーカラーの「カートに追加」ボタンコンポーネントは、フォーラム/コミュニティプラットフォーム向けに設計されており、流れるような有機的なスタイルが特徴です。応答性が高く、ダークモードをサポートしています。
HTMLコード
<div class="flex items-center justify-center p-4 bg-gradient-to-br from-purple-100 via-pink-100 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 min-h-screen">
<button class="relative flex items-center justify-center
px-8 py-3
font-bold text-lg text-white
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-purple-700
group
overflow-hidden
bg-gradient-to-br from-pink-400 via-purple-400 to-green-400
dark:from-pink-700 dark:via-purple-700 dark:to-green-700
shadow-lg shadow-pink-300/50 dark:shadow-purple-700/50
rounded-full
transform hover:scale-105 active:scale-95
border-2 border-transparent hover:border-white dark:hover:border-gray-800">
<span class="relative z-10 flex items-center gap-2">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z"></path>
</svg>
<span>Add to Cart</span>
</span>
<!-- Organic blob background for hover effect -->
<div class="absolute inset-0 z-0
bg-gradient-to-br from-white/20 via-white/5 to-white/20
dark:from-black/20 dark:via-black/5 dark:to-black/20
transform
scale-0 group-hover:scale-100
transition-all duration-500 ease-out
rounded-full
blur-lg opacity-0 group-hover:opacity-100
bg-opacity-0 group-hover:bg-opacity-100
origin-center
"></div>
<div class="absolute inset-0 z-0
bg-gradient-to-br from-pink-300 via-purple-300 to-green-300
dark:from-pink-600 dark:via-purple-600 dark:to-green-600
transform
scale-0 group-hover:scale-100
transition-all duration-500 ease-out
rounded-full
blur-md opacity-0 group-hover:opacity-75
origin-center
" style="clip-path: ellipse(60% 60% at 50% 50%);"></div>
</button>
</div>関連コンポーネント
カートに入れるボタンコンポーネント
ソーシャルメディアインターフェース用に設計された3Dスタイルの「カートに追加」ボタンコンポーネント。深みのある魅力的なデザイン要素を備えた豊富なインターフェイスが特徴で、ダークテーマのサポートで応答性があります。
Industrial_AddToCartButton
政府/公共サービスWebサイト用のオーシャン/ブルートーンでデザインされたインダストリアルスタイルの「カートに追加」ボタンコンポーネント。露出した要素、実用的な美学、完全な応答性、およびダークモードのサポートを備えています。