Live Demo
マウスを乗せるかTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1017" type="button"><span>サービス案内</span></button>
CSS
.tbx-1017{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;justify-content:center;align-items:center;min-width:164px;min-height:49px;padding:11px 20px;border:1px solid #d4dfe8;border-radius:5px;background:#fff;color:#23435c;font:650 14px/1.3 system-ui,sans-serif;cursor:pointer;transition:color .29s}
.tbx-1017::before{content:"";position:absolute;inset:0;background:#286e87;z-index:-1;transform:translateY(101%);transition:transform .29s cubic-bezier(.23,.82,.24,1)}
.tbx-1017:is(:hover,:focus-visible){color:#fff}
.tbx-1017:is(:hover,:focus-visible)::before{transform:translateY(0)}
.tbx-1017:focus-visible{outline:3px solid #7b65db;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1017,.tbx-1017::before{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
店舗・企業サイトのグローバルメニュー
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではhoverがないため、操作可能要素のフォーカス状態も考慮してください。
Browser：Chrome・Firefox・Safariなどの最新ブラウザで利用可能なCSSを使用。
Reduced Motion：prefers-reduced-motion: reduce に対応。