Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1139" href="#solutions"><span class="tbx-1139__heading"><small>OUR APPROACH</small><strong>3つの強み <b>↗</b></strong></span><span class="tbx-1139__grid"><span class="tbx-1139__hero"><b>01</b><em>DESIGN</em></span><span class="tbx-1139__other"><b>02</b><em>STRATEGY</em></span><span class="tbx-1139__other"><b>03</b><em>SUPPORT</em></span></span></a>CSS
.tbx-1139{box-sizing:border-box;display:block;width:min(305px,100%);padding:13px;background:#e9ece3;border:1px solid #b8c6b8;border-radius:12px;text-decoration:none;font-family:system-ui,sans-serif;color:#2d4d4c}
.tbx-1139__heading{display:grid;gap:6px;margin:0 3px 11px}.tbx-1139__heading small{font-size:9px;letter-spacing:.14em;font-weight:800;color:#678b83}.tbx-1139__heading strong{display:flex;justify-content:space-between;align-items:center;font-size:17px}.tbx-1139__heading b{font-weight:400;font-size:21px}
.tbx-1139__grid{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:57px 57px;gap:7px;transition:grid-template-columns .55s cubic-bezier(.2,.8,.2,1)}
.tbx-1139__grid>span{position:relative;border-radius:6px;padding:9px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.tbx-1139__hero{grid-row:span 2;background:#2d6965;color:#fff}.tbx-1139__other{background:#bbd7ca;color:#2a554f}.tbx-1139__grid b{font-size:10px}.tbx-1139__grid em{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.06em}
.tbx-1139__hero:after{content:"";position:absolute;right:-20px;bottom:-23px;width:100px;height:100px;border:15px solid #a9d1c470;border-radius:50%;transition:transform .55s}
.tbx-1139:is(:hover,:focus-visible) .tbx-1139__grid{grid-template-columns:1.8fr .65fr}.tbx-1139:is(:hover,:focus-visible) .tbx-1139__hero:after{transform:scale(1.24)}.tbx-1139:focus-visible{outline:3px solid #578f80;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1139, .tbx-1139 *, .tbx-1139::before, .tbx-1139::after, .tbx-1139 *::before, .tbx-1139 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Services / Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。