Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1177" aria-label="サンプルナビ"><a href="#studio">STUDIO <span aria-hidden="true">01</span></a><a href="#work">WORK <span aria-hidden="true">02</span></a><a href="#contact">CONTACT <span aria-hidden="true">03</span></a></nav>
CSS
.tbx-1177{box-sizing:border-box;width:265px;max-width:100%;display:flex;flex-direction:column;gap:3px;font-family:system-ui,sans-serif}.tbx-1177 a{position:relative;isolation:isolate;display:flex;justify-content:space-between;align-items:center;min-height:42px;padding:0 15px;overflow:hidden;border-bottom:1px solid #d8e2e7;text-decoration:none;color:#243747;font-size:13px;font-weight:750;letter-spacing:.11em;transition:color .35s}.tbx-1177 a::before{content:'';position:absolute;z-index:-1;left:-18px;top:50%;width:50px;height:50px;border-radius:50%;background:#276b7e;transform:translateY(-50%) scale(.25);transform-origin:left center;transition:transform .55s cubic-bezier(.12,.8,.2,1)}.tbx-1177 a span{font-size:10px;color:#6b8999;transition:color .3s}.tbx-1177 a:is(:hover,:focus-visible){color:white}.tbx-1177 a:is(:hover,:focus-visible)::before{transform:translateY(-50%) scale(11)}.tbx-1177 a:is(:hover,:focus-visible) span{color:#cff5ff}.tbx-1177 a:focus-visible{outline:3px solid #0899ae;outline-offset:-3px}
@media (prefers-reduced-motion: reduce) { .tbx-1177, .tbx-1177 *, .tbx-1177::before, .tbx-1177::after, .tbx-1177 *::before, .tbx-1177 *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Header
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても必要な情報にアクセスできる実装を推奨。
Browser：Chrome・Firefox・Safari・Edgeの現行版を想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。