パーツ番号 09-05-05 ・ CSSのみ

返金保証バッジ

円形バッジで「30日間返金保証」を強調し、購入への心理的ハードルを下げる。EC商品ページの購入ボタン付近に効果的。

css

プレビュー

ソースコード

HTML

<div class="d09-05-05-circle">
          <span class="d09-05-05-num">30</span>
          <span class="d09-05-05-unit">日間</span>
          <span class="d09-05-05-text">返金保証</span>
        </div>

CSS

.d09-05-05-circle{
          width:110px; height:110px; border-radius:50%;
          border:3px dashed #2f7a5e;
          display:flex; flex-direction:column; align-items:center; justify-content:center;
          color:#1f5c46; background:#eef8f3;
        }
        .d09-05-05-num{ font-size:26px; font-weight:800; line-height:1; }
        .d09-05-05-unit{ font-size:11px; margin-top:2px; }
        .d09-05-05-text{ font-size:12px; font-weight:700; margin-top:4px; }

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