Live Demo
対象要素をマウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1284" tabindex="0" role="group" aria-label="認証済み実績"><div class="tbx-1284__head"><span>COMPLIANCE REPORT</span><b>2026</b></div><strong>Quality Audit</strong><p>Independent review completed</p><div class="tbx-1284__stamp" aria-hidden="true">✓<small>VERIFIED</small></div><div class="tbx-1284__rule" aria-hidden="true"></div></div>
CSS
.tbx-1284{box-sizing:border-box;display:block;position:relative;width:288px;max-width:100%;min-height:163px;padding:22px 18px;background:#fbfbf7;border:1px solid #e0dccd;border-radius:4px;color:#414337;font-family:system-ui,sans-serif;overflow:hidden;cursor:default}
.tbx-1284__head{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.12em;color:#777767}.tbx-1284__head b{color:#777767}
.tbx-1284>strong{display:block;font-size:22px;margin-top:14px}.tbx-1284 p{font-size:11px;color:#727769;margin-top:5px}
.tbx-1284__stamp{position:absolute;right:18px;bottom:11px;display:flex;flex-direction:column;align-items:center;width:76px;height:76px;justify-content:center;border:3px double #3f8a72;border-radius:50%;color:#318268;font-size:28px;font-weight:900;transform:translateY(45px) rotate(-35deg) scale(.7);opacity:0;transition:transform .55s cubic-bezier(.17,1,.2,1),opacity .4s}
.tbx-1284__stamp small{font-size:9px;letter-spacing:.06em}.tbx-1284__rule{position:absolute;left:18px;bottom:16px;width:50%;height:2px;background:#3f8a72;transform:scaleX(0);transform-origin:left;transition:transform .5s}
.tbx-1284:hover .tbx-1284__stamp,.tbx-1284:focus-visible .tbx-1284__stamp{transform:translateY(0) rotate(-12deg) scale(1);opacity:1}
.tbx-1284:hover .tbx-1284__rule,.tbx-1284:focus-visible .tbx-1284__rule{transform:scaleX(1)}
.tbx-1284:focus-visible{outline:3px solid #459982;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1284__stamp,.tbx-1284__rule{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Trust / Business
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバーと同じ結果にならないため、タップ・フォーカス時の動作も確認してください。
Browser：現行Chrome / Firefox / Edge / SafariのCSS機能を利用します。
Reduced Motion：prefers-reduced-motion: reduce でアニメーションを停止します。