EC・商品
料金 月/年トグル
月額⇄年額をトグルすると価格が数値カウントアニメで切替わり、「2ヶ月分お得」の割引バッジがふわっと出現するプランカード。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="pt-wrap">
<div class="pt-switch-row">
<span class="pt-sw-label" id="ptLblMonthly">月払い</span>
<button class="pt-switch" id="ptSwitch" role="switch" aria-checked="false" aria-label="年払いに切替">
<span class="pt-sw-knob"></span>
</button>
<span class="pt-sw-label" id="ptLblYearly">年払い</span>
</div>
<div class="pt-badge-wrap">
<span class="pt-badge" id="ptBadge">2ヶ月分お得</span>
</div>
<div class="pt-cards">
<div class="pt-card">
<p class="pt-plan">スタンダード</p>
<div class="pt-price-row">
<span class="pt-currency">¥</span>
<span class="pt-amount" id="ptAmt1">980</span>
<span class="pt-per" id="ptPer1">/月</span>
</div>
<p class="pt-note" id="ptNote1"> </p>
<ul class="pt-features">
<li>基本機能すべて</li>
<li>5プロジェクトまで</li>
<li>メールサポート</li>
</ul>
<button class="pt-btn">はじめる</button>
</div>
<div class="pt-card pt-card--pro">
<p class="pt-plan">プロ</p>
<div class="pt-price-row">
<span class="pt-currency">¥</span>
<span class="pt-amount" id="ptAmt2">2480</span>
<span class="pt-per" id="ptPer2">/月</span>
</div>
<p class="pt-note" id="ptNote2"> </p>
<ul class="pt-features">
<li>無制限プロジェクト</li>
<li>優先サポート</li>
<li>API アクセス</li>
</ul>
<button class="pt-btn pt-btn--pro">はじめる</button>
</div>
</div>
</div>