Live Demo
マウスを乗せるか、Tabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#step-two" class="tbx-1194"><span class="tbx-1194__main"><b>次のステップへ</b><span aria-hidden="true">↗</span></span><span class="tbx-1194__steps" aria-hidden="true"><i></i><i></i><i></i></span><small>STEP 01 → 02</small></a>
CSS
.tbx-1194{display:grid;gap:9px;width:242px;max-width:100%;padding:17px 18px 13px;text-decoration:none;color:#21304c;background:#f9f7ee;border:1px solid #d8d4c7;border-radius:9px;font:600 15px system-ui;box-sizing:border-box;transition:border-color .35s,box-shadow .35s}.tbx-1194__main{display:flex;align-items:center;justify-content:space-between}.tbx-1194__main span{font-size:22px;transition:transform .35s}.tbx-1194__steps{display:flex;gap:5px}.tbx-1194__steps i{height:6px;flex:1;background:#dddad0;border-radius:2px;transition:background .35s,transform .35s}.tbx-1194__steps i:nth-child(1){background:#d68c5b}.tbx-1194 small{font-size:9px;letter-spacing:.14em;color:#68717e}.tbx-1194:is(:hover,:focus-visible){border-color:#c87746;box-shadow:0 8px 18px #51381b20}.tbx-1194:is(:hover,:focus-visible) .tbx-1194__main span{transform:translate(3px,-3px)}.tbx-1194:is(:hover,:focus-visible) .tbx-1194__steps i:nth-child(2){background:#d68c5b;transform:translateY(-2px);transition-delay:.07s}.tbx-1194:is(:hover,:focus-visible) .tbx-1194__steps i:nth-child(3){background:#d68c5b;transform:translateY(-2px);transition-delay:.15s}.tbx-1194:focus-visible{outline:3px solid #b9613f;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1194,.tbx-1194 *,.tbx-1194::before,.tbx-1194::after,.tbx-1194 *::before,.tbx-1194 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Onboarding
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバー時にだけ隠さない設計にしてください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。:has()およびclip-path等は対応ブラウザを確認。
Reduced Motion：prefers-reduced-motion: reduce 対応。