Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1266"><button class="route" type="button"><span class="top"><span>Start your project</span><b aria-hidden="true">→</b></span><span class="path" aria-hidden="true"><i></i><em>BRIEF</em><span class="track"></span><em>BUILD</em><i></i></span></button><p class="note">From idea to first build</p></div>CSS
.tbx-1266{display:grid;place-content:center;justify-items:center;gap:12px;box-sizing:border-box;min-height:218px;width:100%;padding:22px 16px;background:#f6f0e8;color:#422d29;font-family:system-ui,sans-serif}
.tbx-1266 *{box-sizing:border-box}.tbx-1266 .route{min-width:min(292px,100%);border:1px solid #ac6d55;border-radius:6px;background:#fff9f1;color:#5b382c;cursor:pointer;padding:14px 18px 10px;box-shadow:7px 7px 0 #dfc4af;font:700 15px system-ui,sans-serif;transition:background .3s,box-shadow .3s}
.tbx-1266 .top{display:flex;justify-content:space-between;gap:16px}.tbx-1266 b{font-size:22px;line-height:1;display:inline-block;transition:transform .3s}.tbx-1266 .path{display:flex;align-items:center;gap:6px;max-height:0;opacity:0;overflow:hidden;padding-top:0;transition:max-height .4s,opacity .3s,padding-top .4s}
.tbx-1266 .path i{width:7px;height:7px;border-radius:50%;border:2px solid #b45c41;flex:none}.tbx-1266 .path em{font:600 9px system-ui;color:#91644e;letter-spacing:.13em}.tbx-1266 .track{width:64px;max-width:20vw;height:1px;background:#c7a08f;position:relative}.tbx-1266 .track:after{content:'';display:block;height:3px;position:absolute;left:0;top:-1px;width:0;background:#c26d47;transition:width .46s .12s}
.tbx-1266 .route:is(:hover,:focus-visible){background:#fff;box-shadow:3px 3px 0 #dfc4af}.tbx-1266 .route:is(:hover,:focus-visible) .path{max-height:48px;opacity:1;padding-top:13px}.tbx-1266 .route:is(:hover,:focus-visible) .track:after{width:100%}.tbx-1266 .route:is(:hover,:focus-visible) b{transform:translateX(5px)}
.tbx-1266 .note{font-size:10px;color:#aa8b78;margin:0}.tbx-1266 :focus-visible{outline:3px solid #8e6bff;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1266 *, .tbx-1266 *::after{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA, Registration
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーができないため、フォーカス・タッチ操作を確認してください。
Browser：現行版のChrome・Safari・Firefox・Edgeを推奨。:has()を利用する素材は古いブラウザでは挙動が異なる場合があります。
Reduced Motion：prefers-reduced-motion: reduce 対応。