HTMLコード
<button class="bg-red-600 dark:bg-purple-600 text-white dark:text-black font-bold py-2 px-4 rounded border-4 border-black dark:border-white hover:bg-red-700 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white transition duration-300 ease-in-out">
Add to Cart
</button>関連コンポーネント
Industrial_AddToCartButton
政府/公共サービスWebサイト用のオーシャン/ブルートーンでデザインされたインダストリアルスタイルの「カートに追加」ボタンコンポーネント。露出した要素、実用的な美学、完全な応答性、およびダークモードのサポートを備えています。
カートに入れるボタンコンポーネント
ブルータリズムにインスパイアされた Tailwind CSS の [カートに追加] ボタン コンポーネントで、ハイ コントラスト、珍しいレイアウト、レスポンシブ エフェクト、ダーク テーマのサポートが特徴です。
カートに入れるボタン
Tailwind CSSでデザインされたSkeuomorphicの「Add to Cart」ボタンコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。