Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1261"><nav class="nav" aria-label="制作工程"><button type="button" class="entry"><span class="no">01</span><span class="name">Discover</span><span class="aux">Listen & research</span><span class="arrow">↗</span></button><button type="button" class="entry"><span class="no">02</span><span class="name">Design</span><span class="aux">Ideas to interface</span><span class="arrow">↗</span></button><button type="button" class="entry"><span class="no">03</span><span class="name">Build</span><span class="aux">Code & launch</span><span class="arrow">↗</span></button></nav></div>CSS
.tbx-1261{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:218px;overflow:visible;padding:24px 18px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#243e43}
.tbx-1261 *,.tbx-1261 *::before,.tbx-1261 *::after{box-sizing:border-box}
.tbx-1261{background:#22272b;color:#f9f5ed}
.tbx-1261 .nav{width:min(310px,100%);border-top:1px solid #637170}
.tbx-1261 .entry{width:100%;color:inherit;display:flex;align-items:center;gap:8px;min-height:52px;border:0;border-bottom:1px solid #637170;background:transparent;text-align:left;padding:6px 4px;cursor:pointer;font-family:inherit}
.tbx-1261 .no{font-size:10px;color:#9eb8ad;flex:0 0 28px}
.tbx-1261 .name{font-size:20px;min-width:104px;font-family:Georgia,serif;transition:transform .3s}
.tbx-1261 .aux{font-size:9px;color:#a2d3b8;flex:1;overflow:hidden;max-width:0;white-space:nowrap;opacity:0;transform:translateX(-7px);transition:max-width .4s,opacity .3s,transform .4s}
.tbx-1261 .arrow{margin-left:auto;font-size:18px;color:#d4bfa7;transition:transform .35s}
.tbx-1261 .entry:is(:hover,:focus-visible) .aux{max-width:130px;opacity:1;transform:none}
.tbx-1261 .entry:is(:hover,:focus-visible) .name{transform:translateX(4px)}
.tbx-1261 .entry:is(:hover,:focus-visible) .arrow{transform:translate(2px,-3px)}
@media (prefers-reduced-motion: reduce) {.tbx-1261 *, .tbx-1261 *::before, .tbx-1261 *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio, Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーが利用できない場合があります。リンク・入力操作をホバー専用にしないでください。
Browser：Chrome・Firefox・Safari・Edgeの現行版を推奨。:has()利用素材は現行版で確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。