Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1140" href="#achievements"><span class="tbx-1140__head"><b>OUR IMPACT</b><strong>数字で見る実績 ↗</strong></span><span class="tbx-1140__stats"><span><b>12</b><small>YEARS</small></span><span><b>48</b><small>PROJECTS</small></span><span><b>96%</b><small>RETENTION</small></span></span></a>CSS
.tbx-1140{box-sizing:border-box;display:block;width:min(315px,100%);min-height:185px;padding:16px;border:1px solid #ced8dd;border-radius:12px;background:#f0f5f8;color:#24435c;text-decoration:none;font-family:system-ui,sans-serif;overflow:hidden}
.tbx-1140__head{display:flex;flex-direction:column;gap:5px}.tbx-1140__head b{font-size:10px;color:#7396a3;letter-spacing:.13em}.tbx-1140__head strong{font-size:14px}
.tbx-1140__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:7px;margin-top:20px}
.tbx-1140__stats>span{display:grid;gap:7px;position:relative;align-content:end;min-height:76px;padding:12px 5px;background:#dce9ee;border-radius:7px;text-align:center;transform:translateY(0);transition:transform .38s cubic-bezier(.19,.8,.23,1),background .38s}
.tbx-1140__stats b{font-size:24px;letter-spacing:-.04em;line-height:1}.tbx-1140__stats small{font-size:9px;color:#627e8b;font-weight:700}
.tbx-1140:is(:hover,:focus-visible) .tbx-1140__stats>span{background:#cee4e9;transform:translateY(-11px)}.tbx-1140:is(:hover,:focus-visible) .tbx-1140__stats>span:nth-child(2){transition-delay:.085s;transform:translateY(-17px)}.tbx-1140:is(:hover,:focus-visible) .tbx-1140__stats>span:nth-child(3){transition-delay:.17s;transform:translateY(-23px)}
.tbx-1140:focus-visible{outline:3px solid #699bb0;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1140, .tbx-1140 *, .tbx-1140::before, .tbx-1140::after, .tbx-1140 *::before, .tbx-1140 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Corporate / Statistics
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。