Live Demo
マウスを乗せるかTabキーでフォーカスして、動きの変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1213" aria-label="Sample primary navigation"><a href="#tbx-1213-works">WORKS</a><a href="#tbx-1213-about">ABOUT</a><a href="#tbx-1213-notes">NOTES</a><a href="#tbx-1213-contact">CONTACT</a></nav>CSS
.tbx-1213{box-sizing:border-box}
.tbx-1213{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2.5vw,23px);flex-wrap:wrap;width:100%;min-height:182px;padding:12px;background:#16181b;font-family:Arial,sans-serif}.tbx-1213 *{box-sizing:border-box}.tbx-1213 a{position:relative;padding:11px 1px;text-decoration:none;white-space:nowrap;font-size:clamp(10px,2.4vw,14px);font-weight:800;letter-spacing:.09em;color:#f3f3f2;transition:color .34s,opacity .34s;outline-offset:7px}.tbx-1213 a::after{content:'';position:absolute;left:0;bottom:2px;width:100%;height:2px;background:#f5c66f;transform:scaleX(0);transform-origin:left;transition:transform .38s}.tbx-1213:is(:hover,:focus-within) a:not(:hover):not(:focus-visible){opacity:.28}.tbx-1213 a:is(:hover,:focus-visible)::after{transform:scaleX(1)}.tbx-1213 a:focus-visible{outline:2px solid #f5c66f}
@media (prefers-reduced-motion:reduce){.tbx-1213 *, .tbx-1213 *::before, .tbx-1213 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Header
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバーでしか見られない構造にしないでください。
Browser：CSSの:has()を使用する素材は最近のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduceに対応。