Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1080" aria-label="制作実績ジャンル"><a href="#all">ALL <small>全部</small></a><a href="#web">WEB <small>Web制作</small></a><a href="#brand">BRAND <small>ブランド</small></a></nav>
CSS
.tbx-1080{width:min(300px,100%);background:#f4f2ec;border:1px solid #e2ddd1;display:flex;gap:2px;padding:5px;border-radius:8px;font:700 11px/1.3 system-ui,sans-serif}
.tbx-1080 a{flex:1;min-width:0;position:relative;display:grid;justify-items:center;gap:5px;padding:17px 1px 19px;text-decoration:none;color:#686456;overflow:hidden;transition:background .3s,color .3s;border-radius:5px}
.tbx-1080 a small{font-size:8px;color:#aaa28e;font-weight:600;transition:color .3s;white-space:nowrap}
.tbx-1080 a:before{position:absolute;content:"";left:10px;right:10px;bottom:6px;height:3px;background:#ce8f53;border-radius:9px;transform:scaleX(0) translateX(-12px);transform-origin:left;transition:transform .4s cubic-bezier(.2,1,.3,1)}
.tbx-1080 a:is(:hover,:focus-visible){background:#fff;color:#754f33}.tbx-1080 a:is(:hover,:focus-visible) small{color:#8b7357}.tbx-1080 a:is(:hover,:focus-visible):before{transform:scaleX(1) translateX(0)}
.tbx-1080 a:focus-visible{outline:2px solid #bd895b;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.tbx-1080 *,.tbx-1080 a:before{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 に対応。