パーツ番号 01-02-12 ・ CSSのみ

ゴール達成プログレスCTA

送料無料まで残り金額を示すバーが画面内でスッと伸びます。WordPress製ECサイトのカートページやミニカートで購入額アップを後押しできます。

scrollcss

プレビュー

ソースコード

HTML

<div class="d01-02-12-card">
          <p class="d01-02-12-lead">送料無料まで<b>あと¥1,200</b></p>
          <div class="d01-02-12-track"><span class="d01-02-12-fill"></span></div>
          <div class="d01-02-12-ends"><span>¥0</span><span>¥8,800</span></div>
          <a href="#" class="d01-02-12-btn" onclick="return false">買い物を続ける</a>
        </div>

CSS

.prev.d01-02-12{background:#fff7ed}
        .d01-02-12-card{width:100%;max-width:300px;background:#fff;border-radius:16px;padding:22px 24px;box-shadow:0 10px 26px rgba(194,120,3,.14);text-align:center}
        .d01-02-12-lead{margin:0 0 14px;font-size:13px;color:#78350f}
        .d01-02-12-lead b{display:block;font-size:20px;color:#c2410c;margin-top:2px}
        .d01-02-12-track{height:10px;border-radius:6px;background:#fde7c8;overflow:hidden}
        .d01-02-12-track .d01-02-12-fill{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#fb923c,#f97316);transition:width 1.1s cubic-bezier(.22,1,.36,1)}
        .d01-02-12.is-in .d01-02-12-fill{width:73%}
        .d01-02-12-ends{display:flex;justify-content:space-between;font-size:10px;color:#c2986a;margin-top:6px}
        .d01-02-12-btn{display:inline-block;margin-top:16px;padding:11px 26px;border-radius:999px;background:#c2410c;color:#fff;font-weight:700;font-size:13px;text-decoration:none;transition:transform .2s ease}
        .d01-02-12-btn:hover{transform:translateY(-2px)}

クラス名 .d01-02-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。