Live Demo
マウスを乗せるかTabキーでフォーカスして、動きの変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1208"><a href="#tbx-1208-link" class="tbx-1208-link"><span class="tbx-1208-line"><i aria-hidden="true">[</i><strong>WORK JOURNAL</strong><i aria-hidden="true">]</i></span><span class="tbx-1208-caption">Behind the scenes · Read the story ↗</span></a></div>CSS
.tbx-1208{box-sizing:border-box}
.tbx-1208{display:grid;place-items:center;width:100%;min-height:182px;padding:20px;background:#fff8e9;font-family:Arial,sans-serif}.tbx-1208 *{box-sizing:border-box}.tbx-1208-link{display:grid;justify-items:center;color:#513b22;text-decoration:none;outline-offset:8px;max-width:100%}.tbx-1208-line{display:flex;align-items:center;gap:9px;max-width:100%;white-space:nowrap}.tbx-1208-line strong{font-size:clamp(16px,5vw,26px);letter-spacing:.03em}.tbx-1208-line i{font-style:normal;font-size:42px;font-weight:200;line-height:.8;color:#d58b38;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.tbx-1208-caption{font-size:11px;letter-spacing:.03em;margin-top:10px;color:#936b37;opacity:0;transform:translateY(12px);transition:transform .38s,opacity .38s;text-align:center}.tbx-1208-link:is(:hover,:focus-visible) .tbx-1208-line i:first-child{transform:translateX(-12px)}.tbx-1208-link:is(:hover,:focus-visible) .tbx-1208-line i:last-child{transform:translateX(12px)}.tbx-1208-link:is(:hover,:focus-visible) .tbx-1208-caption{opacity:1;transform:translateY(0)}.tbx-1208-link:focus-visible{outline:3px solid #d58b38}
@media (prefers-reduced-motion:reduce){.tbx-1208 *, .tbx-1208 *::before, .tbx-1208 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバーでしか見られない構造にしないでください。
Browser：CSSの:has()を使用する素材は最近のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduceに対応。