Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1244"><a class="feature" href="#feature"><span class="tag"><b>FEATURED</b><i aria-hidden="true">↗</i></span><span class="text">Small spaces,<br>big ideas.</span><span class="rule"></span><span class="desc">CASE STUDY — 2026</span></a></div>CSS
.tbx-1244{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:212px;overflow:hidden;padding:16px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#193647;}
.tbx-1244 *, .tbx-1244 *::before,.tbx-1244 *::after{box-sizing:border-box}
.tbx-1244{background:#eceff3}.tbx-1244 .feature{display:grid;position:relative;width:min(100%,300px);padding:23px;background:#e0e8ec;text-decoration:none;color:#1f3850;border-left:6px solid #3e6a81;isolation:isolate}.tbx-1244 .tag{position:absolute;top:15px;right:14px;display:flex;align-items:center;gap:5px;transform:translateY(2px);transition:transform .35s,color .35s}.tbx-1244 .tag b{font-size:8px;letter-spacing:.16em}.tbx-1244 .tag i{font-size:13px;font-style:normal}.tbx-1244 .text{font-size:26px;font-weight:850;letter-spacing:-.045em;line-height:1.2;margin-top:14px;transition:transform .35s}.tbx-1244 .rule{width:34px;height:2px;background:#ad7757;margin:11px 0;transition:width .42s}.tbx-1244 .desc{font-size:9px;letter-spacing:.16em;color:#668092}.tbx-1244 .feature:is(:hover,:focus-visible) .tag{transform:translateY(-12px);color:#ad7757}.tbx-1244 .feature:is(:hover,:focus-visible) .text{transform:translateX(4px)}.tbx-1244 .feature:is(:hover,:focus-visible) .rule{width:90px}
@media(prefers-reduced-motion:reduce){.tbx-1244 *, .tbx-1244 *::before, .tbx-1244 *::after{{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial, Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末はホバーできないことがあります。必要な操作や情報はタップでも利用できるようにしてください。
Browser：最新版のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduce対応。