Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#external" class="tbx-1179" aria-label="外部ページの詳細を見る"><span class="tbx-1179__rings" aria-hidden="true"></span><svg viewBox="0 0 90 90" aria-hidden="true"><path class="tbx-1179__curve" d="M22 56 C25 26 62 27 65 47 M52 36 L66 47 L55 58"/><path class="tbx-1179__direct" d="M23 66 L66 23 M46 23 H66 V43"/></svg><span class="tbx-1179__txt">VISIT</span></a>
CSS
.tbx-1179{box-sizing:border-box;position:relative;width:130px;height:153px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;text-decoration:none;color:#23485a;font:750 11px system-ui;letter-spacing:.12em}.tbx-1179__rings{position:absolute;width:105px;height:105px;top:7px;border-radius:50%;border:1px solid #a9cbd0;box-shadow:0 0 0 8px #f3f9f9,0 0 0 9px #d0e2e5;transition:transform .52s,border-color .52s}.tbx-1179 svg{z-index:1;width:80px;height:80px;overflow:visible}.tbx-1179 svg path{stroke:#255c6c;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;fill:none;transition:opacity .3s,transform .45s;transform-origin:center}.tbx-1179__direct{opacity:0;transform:rotate(-25deg) scale(.8)}.tbx-1179__txt{z-index:1;margin-top:6px}.tbx-1179:is(:hover,:focus-visible) .tbx-1179__rings{transform:scale(1.09);border-color:#00a0a2}.tbx-1179:is(:hover,:focus-visible) .tbx-1179__curve{opacity:0;transform:rotate(45deg) scale(.7)}.tbx-1179:is(:hover,:focus-visible) .tbx-1179__direct{opacity:1;transform:rotate(0) scale(1)}.tbx-1179:focus-visible{outline:3px solid #0a788b;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1179, .tbx-1179 *, .tbx-1179::before, .tbx-1179::after, .tbx-1179 *::before, .tbx-1179 *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / External Link
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても必要な情報にアクセスできる実装を推奨。
Browser：Chrome・Firefox・Safari・Edgeの現行版を想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。