Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1093" aria-label="メインナビゲーション"><a href="#work" data-label="WORK"><span class="tbx-1093__num">01</span><span class="tbx-1093__name">制作実績</span><span class="tbx-1093__arrow" aria-hidden="true">↗</span><b aria-hidden="true">WORK</b></a><a href="#studio"><span class="tbx-1093__num">02</span><span class="tbx-1093__name">スタジオ</span><span class="tbx-1093__arrow" aria-hidden="true">↗</span><b aria-hidden="true">ABOUT</b></a><a href="#contact"><span class="tbx-1093__num">03</span><span class="tbx-1093__name">お問い合わせ</span><span class="tbx-1093__arrow" aria-hidden="true">↗</span><b aria-hidden="true">HELLO</b></a></nav>
CSS
.tbx-1093{width:min(282px,100%);padding:11px;background:#edf0ed;font-family:system-ui,sans-serif}
.tbx-1093 a{position:relative;display:flex;align-items:center;gap:13px;min-height:62px;padding:0 14px;border-bottom:1px solid #bfcac4;color:#28483f;text-decoration:none;overflow:hidden;isolation:isolate}.tbx-1093 a:last-child{border-bottom:0}
.tbx-1093__num,.tbx-1093__name,.tbx-1093__arrow{position:relative;z-index:1}.tbx-1093__num{font-size:10px;color:#82988c;font-weight:800}.tbx-1093__name{font-size:14px;font-weight:720;transition:transform .3s}.tbx-1093__arrow{margin-left:auto;font-size:20px;opacity:.4;transition:transform .3s,opacity .3s}
.tbx-1093 a b{position:absolute;right:-5px;top:50%;transform:translateY(-35%) translateX(13px);font-size:43px;font-weight:950;letter-spacing:-.08em;color:#b7d4c16e;opacity:0;transition:opacity .36s,transform .36s;z-index:0;pointer-events:none}
.tbx-1093 a:is(:hover,:focus-visible) b{opacity:1;transform:translateY(-50%) translateX(0)}.tbx-1093 a:is(:hover,:focus-visible) .tbx-1093__name{transform:translateX(5px)}.tbx-1093 a:is(:hover,:focus-visible) .tbx-1093__arrow{transform:translate(3px,-3px);opacity:1}
.tbx-1093 a:focus-visible{outline:3px solid #c58b61;outline-offset:-3px}@media(prefers-reduced-motion:reduce){.tbx-1093 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では本来のリンク・操作を優先し、必要な情報は通常状態でも理解できるようにしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。