Live Demo
マウスを乗せるかTabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1028" type="button"><span aria-hidden="true" class="tbx-1028__br">[</span><span>私たちについて</span><span aria-hidden="true" class="tbx-1028__br">]</span></button>
CSS
.tbx-1028{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;padding:10px 6px;color:#1f4564;font:700 17px/1.5 system-ui,sans-serif;cursor:pointer}
.tbx-1028__br{color:#d0775d;opacity:0;transition:opacity .27s ease,transform .27s ease;font-weight:900}
.tbx-1028__br:first-child{transform:translateX(9px)}.tbx-1028__br:last-child{transform:translateX(-9px)}
.tbx-1028:is(:hover,:focus-visible) .tbx-1028__br{opacity:1;transform:translateX(0)}
.tbx-1028:focus-visible{outline:3px solid #855fc2;outline-offset:4px;border-radius:3px}
@media(prefers-reduced-motion:reduce){.tbx-1028__br{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に対応。