Live Demo
マウスを乗せるかTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1014" type="button"><span>詳しく見る</span><span class="tbx-1014__disc" aria-hidden="true"><span class="tbx-1014__track"><span>↗</span><span>↗</span></span></span></button>
CSS
.tbx-1014{display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:6px 4px;border:0;background:transparent;color:#173958;font:650 14px/1.4 system-ui,sans-serif;cursor:pointer}
.tbx-1014__disc{display:grid;place-items:center;width:43px;height:43px;overflow:hidden;border:1px solid #a3bfd5;border-radius:50%;background:#fff}
.tbx-1014__track{display:flex;align-items:center;gap:15px;transform:translateX(20px);transition:transform .32s cubic-bezier(.24,.78,.24,1)}
.tbx-1014__track span{display:block;width:22px;flex:none;text-align:center;font:23px/1 system-ui;color:#1d6b91}
.tbx-1014:is(:hover,:focus-visible) .tbx-1014__track{transform:translateX(-17px)}
.tbx-1014:focus-visible{outline:3px solid #7b65db;outline-offset:5px;border-radius:3px}
@media(prefers-reduced-motion:reduce){.tbx-1014__track{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
詳細ページへのテキストリンクやサービス一覧
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではhoverがないため、操作可能要素のフォーカス状態も考慮してください。
Browser：Chrome・Firefox・Safariなどの最新ブラウザで利用可能なCSSを使用。
Reduced Motion：prefers-reduced-motion: reduce に対応。