Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1134" href="#documents"><span class="tbx-1134__label"><small>GUIDE 2026</small><strong>資料を確認する</strong></span><span class="tbx-1134__rail" aria-hidden="true"><i>↗</i><i>↗</i></span></a>CSS
.tbx-1134{box-sizing:border-box;width:min(292px,100%);min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:13px;padding:17px 17px 17px 20px;background:#f1f5ef;border:1px solid #9db4a5;border-radius:13px;color:#254f41;text-decoration:none;font-family:system-ui,sans-serif;transition:background .35s,border-color .35s}
.tbx-1134__label{display:grid;gap:7px}.tbx-1134 small{font-size:10px;font-weight:700;letter-spacing:.14em;color:#71877a}.tbx-1134 strong{font-size:17px;font-weight:760}
.tbx-1134__rail{position:relative;flex:none;width:66px;height:52px;border-top:1px solid #b6c5bc;border-bottom:1px solid #b6c5bc;overflow:hidden}
.tbx-1134__rail i{position:absolute;inset:0;display:grid;place-items:center;font-size:23px;line-height:1;font-style:normal;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s}
.tbx-1134__rail i:first-child{color:#296c5c;transform:translate(0,0)}.tbx-1134__rail i:last-child{color:#b38344;transform:translate(-70px,52px)}
.tbx-1134:is(:hover,:focus-visible){background:#e3eee5;border-color:#428472}.tbx-1134:is(:hover,:focus-visible) .tbx-1134__rail i:first-child{transform:translate(67px,-52px);opacity:0}.tbx-1134:is(:hover,:focus-visible) .tbx-1134__rail i:last-child{transform:translate(0,0)}
.tbx-1134:focus-visible{outline:3px solid #428472;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1134, .tbx-1134 *, .tbx-1134::before, .tbx-1134::after, .tbx-1134 *::before, .tbx-1134 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Download / Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。