Live Demo
マウスを乗せるかTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1016" type="button">私たちについて</button>
CSS
.tbx-1016{position:relative;padding:12px 6px 14px;border:0;background:transparent;color:#203951;font:650 15px/1.4 system-ui,sans-serif;cursor:pointer}
.tbx-1016::after{content:"";position:absolute;left:50%;right:50%;bottom:5px;height:2px;background:#2c94a4;transition:left .27s ease,right .27s ease}
.tbx-1016:is(:hover,:focus-visible)::after{left:6px;right:6px}
.tbx-1016:focus-visible{outline:3px solid #7b65db;outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){.tbx-1016::after{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
ナビゲーション・フッターリンク・カテゴリーリンク
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではhoverがないため、操作可能要素のフォーカス状態も考慮してください。
Browser：Chrome・Firefox・Safariなどの最新ブラウザで利用可能なCSSを使用。
Reduced Motion：prefers-reduced-motion: reduce に対応。