Live Demo
マウスを乗せるかTabキーでフォーカスして、動きの変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1207"><a class="tbx-1207-title" href="#tbx-1207-link" aria-label="Design notes"><span class="tbx-1207-shadow" aria-hidden="true">DESIGN</span><span class="tbx-1207-main">DESIGN</span><span class="tbx-1207-foot">NOTES / 2026 ↗</span></a></div>CSS
.tbx-1207{box-sizing:border-box}
.tbx-1207{display:grid;place-items:center;width:100%;min-height:182px;background:#f1ece4;padding:20px;font-family:Arial,sans-serif}.tbx-1207 *{box-sizing:border-box}.tbx-1207-title{position:relative;display:flex;align-items:center;flex-direction:column;text-decoration:none;color:#282522;line-height:1;outline-offset:7px}.tbx-1207-main,.tbx-1207-shadow{font-size:clamp(28px,8vw,57px);letter-spacing:-.075em;font-weight:900;white-space:nowrap}.tbx-1207-main{z-index:1;position:relative;transition:transform .4s,color .3s}.tbx-1207-shadow{position:absolute;top:0;left:0;color:#e78361;opacity:0;transform:translate(0,0);transition:transform .45s,opacity .35s}.tbx-1207-foot{margin-top:11px;letter-spacing:.24em;font-size:10px;font-weight:700}.tbx-1207-title:is(:hover,:focus-visible) .tbx-1207-shadow{opacity:1;transform:translate(6px,-6px)}.tbx-1207-title:is(:hover,:focus-visible) .tbx-1207-main{transform:translate(-5px,4px);color:#153f52}.tbx-1207-title:focus-visible{outline:3px solid #d77c59}
@media (prefers-reduced-motion:reduce){.tbx-1207 *, .tbx-1207 *::before, .tbx-1207 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバーでしか見られない構造にしないでください。
Browser：CSSの:has()を使用する素材は最近のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduceに対応。