Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1117" aria-label="サンプルメニュー"><a href="#about">ABOUT<span class="tbx-1117__corners" aria-hidden="true"></span></a><a href="#service">SERVICE<span class="tbx-1117__corners" aria-hidden="true"></span></a><a href="#contact">CONTACT<span class="tbx-1117__corners" aria-hidden="true"></span></a></nav>
CSS
.tbx-1117{width:min(287px,100%);display:flex;flex-direction:column;gap:8px;padding:12px;background:#192d3b;border-radius:8px;font-family:system-ui,sans-serif}.tbx-1117 a{position:relative;display:flex;align-items:center;justify-content:center;height:43px;color:#cfdee5;text-decoration:none;font-size:11px;letter-spacing:.18em;font-weight:800;transition:color .3s,background .3s}.tbx-1117__corners{position:absolute;inset:4px 8px;pointer-events:none;opacity:0;transform:scale(.88);transition:transform .36s,opacity .36s;background:linear-gradient(#e8b17b,#e8b17b) left top/11px 2px no-repeat,linear-gradient(#e8b17b,#e8b17b) left top/2px 11px no-repeat,linear-gradient(#e8b17b,#e8b17b) right top/11px 2px no-repeat,linear-gradient(#e8b17b,#e8b17b) right top/2px 11px no-repeat,linear-gradient(#e8b17b,#e8b17b) left bottom/11px 2px no-repeat,linear-gradient(#e8b17b,#e8b17b) left bottom/2px 11px no-repeat,linear-gradient(#e8b17b,#e8b17b) right bottom/11px 2px no-repeat,linear-gradient(#e8b17b,#e8b17b) right bottom/2px 11px no-repeat}
.tbx-1117 a:is(:hover,:focus-visible){color:#fff;background:#263f50}.tbx-1117 a:is(:hover,:focus-visible) .tbx-1117__corners{opacity:1;transform:scale(1)}.tbx-1117 a:focus-visible{outline:2px solid #e8b17b;outline-offset:1px}@media(prefers-reduced-motion:reduce){.tbx-1117 *{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 に対応。