カートに入れるボタン

レスポンシブ効果とTailwind CSSを使用したダークテーマのサポートを備えた3Dデザインの[カートに追加]ボタンコンポーネント。

プレビュー

HTMLコード

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative group">
        <button class="relative px-6 py-2 font-bold text-white transition-transform duration-300 bg-blue-600 rounded-lg shadow-lg transform hover:scale-105 active:scale-95 dark:bg-blue-700">
            <span class="absolute top-0 left-0 w-full h-full rounded-lg bg-blue-500 opacity-60 transition-opacity duration-300 group-hover:opacity-100"></span>
            <span class="relative z-10">Add to Cart</span>
        </button>
        <div class="absolute right-0 -top-1 -mr-4 z-0 w-10 h-10 bg-blue-200 rounded-full shadow-lg transform scale-75 transition-all duration-300 group-hover:scale-100"></div>
    </div>
</div>

関連コンポーネント

カートに入れるボタン

スキューモーフィック要素、鮮やかな色、ダークテーマのサポートで設計されたレスポンシブな [カートに追加] ボタンコンポーネントで、ブログやコンテンツの消費目的に適しています。

開ける

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

マテリアルデザインの原則でスタイル化されたレスポンシブな「カートに入れる」ボタンコンポーネントで、トライアドカラースキームとダークモードをサポートしています。ダッシュボード用に設計されており、数量セレクターが含まれており、シャドウとアニメーションにTailwind CSSを使用して深度効果を統合します。

開ける

Industrial_AddToCartButton

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

開ける