Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#route" class="tbx-1115"><span class="tbx-1115__heading"><small>LOCAL JOURNEY / 02</small><b aria-hidden="true">↗</b></span><strong>街をつなぐ、小さな旅。</strong><span class="tbx-1115__route"><span class="tbx-1115__stop"><i></i>START</span><span class="tbx-1115__line"><em></em></span><span class="tbx-1115__stop tbx-1115__stop--end"><i></i>DESTINATION</span></span><span class="tbx-1115__foot">おすすめルートを見る</span></a>
CSS
.tbx-1115{width:min(287px,100%);display:flex;flex-direction:column;gap:17px;padding:18px;border:1px solid #cbd9d4;border-radius:11px;background:#e9f0eb;color:#345249;text-decoration:none;font-family:system-ui,sans-serif;transition:background .35s}
.tbx-1115__heading{display:flex;justify-content:space-between;align-items:center}.tbx-1115 small{font-size:9px;font-weight:800;letter-spacing:.08em;color:#709187}.tbx-1115__heading b{font-size:21px;font-weight:350;transition:transform .35s}.tbx-1115 strong{font-size:15px;white-space:nowrap}.tbx-1115__route{display:flex;align-items:center;gap:4px}.tbx-1115__stop{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:8px;font-weight:900;letter-spacing:.05em}.tbx-1115__stop i{width:16px;height:16px;border:3px solid #4c8272;border-radius:50%;background:#e9f0eb;transition:background .3s,box-shadow .3s}.tbx-1115__line{flex:1;height:3px;background:#d0dbd7;overflow:hidden;border-radius:9px;transform:translateY(-8px)}.tbx-1115__line em{display:block;width:100%;height:100%;background:#dc946b;transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.tbx-1115__foot{font-size:10px;font-weight:700;color:#588072}
.tbx-1115:is(:hover,:focus-visible){background:#dcebe4}.tbx-1115:is(:hover,:focus-visible) .tbx-1115__line em{transform:scaleX(1)}.tbx-1115:is(:hover,:focus-visible) .tbx-1115__stop--end i{background:#dc946b;box-shadow:0 0 0 5px #dc946b44}.tbx-1115:is(:hover,:focus-visible) .tbx-1115__heading b{transform:translate(3px,-3px)}
.tbx-1115:focus-visible{outline:3px solid #dc946b;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1115 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Travel / Services
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。