Live Demo
マウスを乗せるかTabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1029" aria-label="サービスメニューのサンプル"><button type="button">事業紹介 <span aria-hidden="true">↗</span></button><button type="button">取り組み <span aria-hidden="true">↗</span></button><button type="button">採用情報 <span aria-hidden="true">↗</span></button></nav>
CSS
.tbx-1029{width:214px;padding:4px;background:#fff;border:1px solid #dce4e8;border-radius:7px;font:650 13px/1.4 system-ui,sans-serif}
.tbx-1029 button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:40px;padding:10px 12px 10px 18px;border:0;background:transparent;color:#2c4859;text-align:left;cursor:pointer;transition:background .24s ease,color .24s ease}
.tbx-1029 button+button{border-top:1px solid #edf0f2}.tbx-1029 button::before{content:"";position:absolute;top:6px;bottom:6px;left:0;width:3px;background:#dc846b;transform:scaleY(0);transform-origin:50% 0;transition:transform .24s ease}
.tbx-1029 button:is(:hover,:focus-visible){background:#f3faf9;color:#176a77}.tbx-1029 button:is(:hover,:focus-visible)::before{transform:scaleY(1)}
.tbx-1029 button:focus-visible{outline:2px solid #855fc2;outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.tbx-1029 button,.tbx-1029 button::before{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
サービスメニュー・サイドナビゲーション
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作が必要な素材はクリック・入力にも対応。hover専用装飾は重要情報を隠さない設計です。
Browser：最新のChrome、Firefox、Safari、Edge向けのCSS。複数環境で最終検証してください。
Reduced Motion：prefers-reduced-motion: reduceに対応。