Live Demo
マウスを重ねるか、Tabキーによるフォーカスで変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1039" tabindex="0" aria-label="スタンダードプラン 月額4900円">
<span class="tbx-1039__flag">POPULAR</span><span class="tbx-1039__plan">STANDARD</span>
<span class="tbx-1039__price">¥4,900 <small>/ mo.</small></span>
<span class="tbx-1039__benefits">3 projects · Email support</span>
<span class="tbx-1039__foot">Plan details <b aria-hidden="true">↗</b></span>
</div>
CSS
.tbx-1039{position:relative;width:min(242px,95%);padding:21px 20px 16px;border:1px solid #d3dfeb;border-radius:10px;background:#fff;box-shadow:0 6px 12px #15294208;color:#203348;display:flex;flex-direction:column;gap:10px;font-family:system-ui;transition:border .3s,box-shadow .3s,transform .3s;cursor:default}
.tbx-1039__flag{position:absolute;right:11px;top:10px;font-size:8px;font-weight:800;letter-spacing:.08em;color:#a56342;background:#fff2e6;padding:5px 7px;border-radius:50px}
.tbx-1039__plan{color:#58708a;font-size:10px;font-weight:800;letter-spacing:.13em}
.tbx-1039__price{font-size:25px;font-weight:800;letter-spacing:-.06em;transition:color .3s}.tbx-1039__price small{font-size:10px;letter-spacing:0;color:#8895a5;font-weight:500}
.tbx-1039__benefits{font-size:10px;color:#617287;border-bottom:1px solid #e6edf2;padding-bottom:11px}
.tbx-1039__foot{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:#456274}.tbx-1039__foot b{font-size:16px;transition:transform .25s}
.tbx-1039:is(:hover,:focus-visible){transform:translateY(-3px);border-color:#357781;box-shadow:0 13px 30px #0b475c19}
.tbx-1039:is(:hover,:focus-visible) .tbx-1039__price{color:#257e84}
.tbx-1039:is(:hover,:focus-visible) .tbx-1039__foot b{transform:translate(3px,-3px)}
.tbx-1039:focus-visible{outline:3px solid #db9b5e;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1039,.tbx-1039__price,.tbx-1039__foot b{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
定額サービス・料金プラン比較
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末でも情報が欠落しない設計を基本とします。クリックで操作するサンプルはタップで確認できます。
Browser：最新のChrome・Firefox・Safari・Edge向けCSS。:has()を利用する素材は最新ブラウザを想定しています。
Reduced Motion：prefers-reduced-motion: reduceに対応。