Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#next" class="tbx-1079"><span>次の実績を見る</span><svg width="51" height="45" viewBox="0 0 51 45" fill="none" aria-hidden="true"><circle cx="25" cy="22" r="20"/><path class="tbx-1079__path" d="M14 22H34M26 14L34 22L26 30"/></svg></a>
CSS
.tbx-1079{display:flex;align-items:center;justify-content:space-between;gap:14px;width:min(275px,100%);padding:13px 17px 13px 22px;background:#233e56;text-decoration:none;color:#fff;border-radius:5px;font:700 13px/1.4 system-ui,sans-serif;transition:background .3s}
.tbx-1079 svg{flex:0 0 51px;overflow:visible}.tbx-1079 circle{stroke:#84b7bc;stroke-width:1.4;transition:stroke .3s}.tbx-1079__path{stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:42;stroke-dashoffset:42;transition:stroke-dashoffset .5s cubic-bezier(.22,1,.36,1)}
.tbx-1079:is(:hover,:focus-visible){background:#1d7776}.tbx-1079:is(:hover,:focus-visible) .tbx-1079__path{stroke-dashoffset:0}.tbx-1079:is(:hover,:focus-visible) circle{stroke:#d9f4e8}
.tbx-1079:focus-visible{outline:3px solid #dfb778;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1079,.tbx-1079 *{transition:none!important}.tbx-1079__path{stroke-dashoffset:0}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Links / CTA
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末にはリンクの本来の役割を残し、必要な説明は通常時にも読める形にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。