Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1153" aria-label="用語索引"><a href="#index-a"><span class="tbx-1153__alpha">A</span><span class="tbx-1153__desc">Animation</span></a><a href="#index-b"><span class="tbx-1153__alpha">B</span><span class="tbx-1153__desc">Background</span></a><a href="#index-c"><span class="tbx-1153__alpha">C</span><span class="tbx-1153__desc">Component</span></a></nav>CSS
.tbx-1153{box-sizing:border-box;display:flex;gap:7px;width:min(310px,100%);padding:15px;background:#f3f5fa;border:1px solid #d3dcef;border-radius:10px;font-family:system-ui,sans-serif}
.tbx-1153 a{box-sizing:border-box;display:flex;flex:1 1 0;min-width:0;align-items:center;gap:6px;justify-content:center;padding:11px 6px;background:#dce7f4;border-radius:5px;color:#29445d;text-decoration:none;overflow:hidden;transition:flex-grow .48s cubic-bezier(.18,.8,.2,1),background .3s}
.tbx-1153__alpha{font-size:21px;font-weight:850;flex:none}.tbx-1153__desc{font-size:10px;font-weight:650;white-space:nowrap;max-width:0;opacity:0;overflow:hidden;transition:max-width .48s,opacity .4s}
.tbx-1153 a:is(:hover,:focus-visible){flex-grow:3;background:#b9d5f3}.tbx-1153 a:is(:hover,:focus-visible) .tbx-1153__desc{max-width:95px;opacity:1}
.tbx-1153 a:focus-visible{outline:3px solid #5276a8;outline-offset:3px}
@media (prefers-reduced-motion: reduce) { .tbx-1153, .tbx-1153 *, .tbx-1153::before, .tbx-1153::after, .tbx-1153 *::before, .tbx-1153 *::after { animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Directory / Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。