Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1074" aria-label="セクションナビゲーション"><a href="#service"><small>01</small><span>サービス</span><b aria-hidden="true">↗</b></a><a href="#about"><small>02</small><span>私たちについて</span><b aria-hidden="true">↗</b></a><a href="#contact"><small>03</small><span>お問い合わせ</span><b aria-hidden="true">↗</b></a></nav>
CSS
.tbx-1074{width:min(300px,100%);font:12px/1.4 system-ui,sans-serif;background:#fff;padding:11px 16px;border:1px solid #dfe5eb;border-radius:8px}
.tbx-1074 a{position:relative;display:flex;align-items:center;gap:12px;min-height:54px;color:#2d475e;text-decoration:none;border-bottom:1px solid #e8edf0;overflow:hidden}
.tbx-1074 a:last-child{border-bottom:0}.tbx-1074 small{color:#8fa2ab;font-size:10px;transition:transform .25s,color .25s;font-weight:800}.tbx-1074 a span{font-size:12px;font-weight:700;transition:transform .3s}
.tbx-1074 a b{font-weight:400;font-size:17px;margin-left:auto;opacity:0;transform:translate(-9px,6px);transition:transform .3s,opacity .3s}
.tbx-1074 a:after{position:absolute;content:"";height:2px;bottom:0;left:0;right:0;background:#df9260;transform:scaleX(0);transform-origin:left;transition:transform .34s}
.tbx-1074 a:is(:hover,:focus-visible) small{transform:translateX(6px);color:#bc6b37}.tbx-1074 a:is(:hover,:focus-visible) span{transform:translateX(6px)}.tbx-1074 a:is(:hover,:focus-visible) b{transform:translate(0,0);opacity:1}
.tbx-1074 a:is(:hover,:focus-visible):after{transform:scaleX(1)}.tbx-1074 a:focus-visible{outline:2px solid #df9260;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.tbx-1074 *, .tbx-1074 a:after{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末にはリンクの本来の役割を残し、必要な説明は通常時にも読める形にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。