Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1146" href="#specs"><span class="tbx-1146__text"><small>SPECIFICATION / 2026</small><strong>寸法図を確認する</strong></span><span class="tbx-1146__track" aria-hidden="true"><i></i><em>↗</em></span></a>CSS
.tbx-1146{box-sizing:border-box;display:grid;gap:13px;width:min(294px,100%);padding:18px 20px 17px;border:1px solid #9fc1b9;border-radius:7px;background:#e9f3ef;color:#24534c;text-decoration:none;font-family:system-ui,sans-serif;transition:background .3s}
.tbx-1146__text{display:grid;gap:5px}.tbx-1146 small{font-size:9px;letter-spacing:.16em;font-weight:750}.tbx-1146 strong{font-size:17px;font-weight:800}
.tbx-1146__track{display:block;position:relative;height:27px;border-bottom:3px solid #3e8076;background:repeating-linear-gradient(90deg,#7baba1 0 1px,transparent 1px 17px) left bottom/100% 9px no-repeat;overflow:visible}
.tbx-1146__track i{position:absolute;left:5px;bottom:-3px;width:23px;height:23px;background:#28695f;border:3px solid #f9ffff;box-shadow:0 0 0 1px #28695f;border-radius:50%;transition:transform .55s cubic-bezier(.25,.8,.2,1)}
.tbx-1146__track em{position:absolute;right:0;top:-2px;font-size:22px;font-style:normal;transform:rotate(-18deg);transition:transform .5s}
.tbx-1146:is(:hover,:focus-visible){background:#d6ebe3}.tbx-1146:is(:hover,:focus-visible) .tbx-1146__track i{transform:translateX(220px)}.tbx-1146:is(:hover,:focus-visible) .tbx-1146__track em{transform:rotate(0deg) translate(2px,-6px)}
.tbx-1146:focus-visible{outline:3px solid #3e8076;outline-offset:4px}
@media(max-width:420px){.tbx-1146:is(:hover,:focus-visible) .tbx-1146__track i{transform:translateX(min(220px,60vw))}}
@media (prefers-reduced-motion: reduce) { .tbx-1146, .tbx-1146 *, .tbx-1146::before, .tbx-1146::after, .tbx-1146 *::before, .tbx-1146 *::after { animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Download / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。