EC 購入完了 CTA ボタン
この部品は、価格と「カートに入れる」ラベルを 1 つのボタンに横並びにした EC 向けの CTA です。 display:inflex でアイコン風の区切り線をはさみ、金額側だけ半透明の黒（ rgba(0,0,0,.18) ）を重ねて視覚的に階層を作っています。
解説
この部品は、価格と「カートに入れる」ラベルを 1 つのボタンに横並びにした EC 向けの CTA です。display:inflexでアイコン風の区切り線をはさみ、金額側だけ半透明の黒（rgba(0,0,0,.18)）を重ねて視覚的に階層を作っています。CSS だけで完結し、JavaScript は不要です。
ホバー時はtransform:translateY(-2px)で少し浮き上がり、ブランドカラーの影が広がることで「押せる」感触を返します。動きはtransition0.2 秒で素早く、購入直前の操作をもたつかせません。
使う場面とカスタマイズ
- 商品ページの購入ファネル最終段、カート、価格表の申込ボタンなど
- 背景色は
background、価格の濃淡は半透明黒の不透明度で調整できる - 金額とラベルの
paddingを揃えると左右のバランスが整う
注意点として、矢印「→」は装飾なので読み上げ環境でも意味が通るよう、ボタン自体のラベルは明確にしておきます。色だけで状態を伝えず、コントラスト比も確保してください。prefers-reduced-motionを尊重するなら浮き上がりのみ残し影の変化を控えると親切です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
価格表示の文字色や背景の濃さを変えられますか
変えられます。金額部分の暗い帯は rgba(0,0,0,.18) の不透明度を上げ下げするだけで濃淡を調整できます。ボタン全体の色は background の値を自社のブランドカラーに差し替えてください。文字色は白のままでも、背景を明るくする場合は読みやすい濃色に変えます。
JavaScript なしでも動きますか
動きます。ホバーで浮き上がる演出も影の広がりもすべて CSS の transition で実装しているため、スクリプトは一切不要です。実際にカートへ追加する処理だけは、サイト側の購入機能に button のクリックを結び付けて実装してください。