Live Demo
ホバー操作、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button type="button" class="tbx-1299" aria-label="View route"><span class="tbx-1299__route"><svg width="180" height="100" viewBox="0 0 180 100" role="img" aria-label="折れ曲がるルートと矢印"><path class="tbx-1299__shadow" d="M18 78H67V25H149"/><path class="tbx-1299__line" d="M18 78H67V25H149"/><path class="tbx-1299__arrow" d="M134 13L149 25L134 37"/><circle cx="18" cy="78" r="5"/></svg></span><span class="tbx-1299__label">VIEW ROUTE <b>→</b></span></button>CSS
*{box-sizing:border-box}
.tbx-1299{display:flex;flex-direction:column;align-items:center;justify-content:center;width:240px;max-width:100%;height:161px;padding:5px 6px 12px;border:1px solid #d0d9e1;background:#f6f8fa;color:#255370;border-radius:12px;font-family:system-ui,sans-serif;cursor:pointer}.tbx-1299__route{display:block;height:108px}.tbx-1299 svg{max-width:100%;overflow:visible}.tbx-1299__shadow{fill:none;stroke:#d1dfe8;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.tbx-1299__line{fill:none;stroke:#177b83;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:180;stroke-dashoffset:180;transition:stroke-dashoffset .8s ease}.tbx-1299__arrow{fill:none;stroke:#ec8654;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;transform-origin:149px 25px;transition:transform .45s,opacity .3s;opacity:.5}.tbx-1299 circle{fill:#ec8654}.tbx-1299__label{font-size:11px;font-weight:760;letter-spacing:.13em}.tbx-1299__label b{font-size:14px;margin-left:6px;display:inline-block;transition:transform .35s}.tbx-1299:hover .tbx-1299__line,.tbx-1299:focus-visible .tbx-1299__line{stroke-dashoffset:0}.tbx-1299:hover .tbx-1299__arrow,.tbx-1299:focus-visible .tbx-1299__arrow{transform:translateX(9px);opacity:1}.tbx-1299:hover .tbx-1299__label b,.tbx-1299:focus-visible .tbx-1299__label b{transform:translateX(5px)}.tbx-1299:focus-visible{outline:3px solid #55aeb6;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.tbx-1299 *,.tbx-1299::before,.tbx-1299::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Link
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバー動作が異なるため、フォーカス操作・実案件のタップ操作を確認してください。
Browser：Chrome / Firefox / Edge / Safariの標準CSS機能を使用します。
Reduced Motion：prefers-reduced-motion: reduceでCSSアニメーション・トランジションを停止します。