Live Demo
マウスを乗せるかTabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1035" type="button"><span>次のページへ</span><span class="tbx-1035__circle" aria-hidden="true"><span class="tbx-1035__chev"></span></span></button>
CSS
.tbx-1035{display:inline-flex;align-items:center;gap:14px;padding:7px 5px;border:0;background:transparent;color:#21465b;font:700 14px/1.4 system-ui,sans-serif;cursor:pointer}
.tbx-1035__circle{display:grid;place-items:center;width:44px;height:44px;border:1px solid #bcd4db;border-radius:50%;background:#e9f5f5}
.tbx-1035__chev{display:block;width:12px;height:12px;border-right:2px solid #22627a;border-top:2px solid #22627a;transform:translateX(-2px) rotate(45deg);transition:transform .42s cubic-bezier(.16,1.45,.35,1)}
.tbx-1035:is(:hover,:focus-visible) .tbx-1035__chev{transform:translateX(5px) scale(1.25,.78) rotate(45deg)}
.tbx-1035:focus-visible{outline:3px solid #855fc2;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1035__chev{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に対応。