Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1086" href="#next"><span class="tbx-1086__leading" aria-hidden="true">↗</span><span class="tbx-1086__label">VIEW DETAILS</span><span class="tbx-1086__end" aria-hidden="true"><span>↗</span><span>↗</span></span></a>
CSS
.tbx-1086{width:min(274px,100%);min-height:64px;border:1px solid #344d67;background:#fff;display:flex;align-items:center;padding:0 18px;gap:15px;position:relative;overflow:hidden;color:#1b3c56;text-decoration:none;font:750 12px/1.4 system-ui,sans-serif;letter-spacing:.1em;transition:color .36s,border-color .36s}
.tbx-1086:before{content:"";position:absolute;inset:0;background:#243e58;transform:scaleX(0);transform-origin:right;transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.tbx-1086__leading,.tbx-1086__label,.tbx-1086__end{position:relative;z-index:1}.tbx-1086__leading{font-size:22px;transition:transform .35s,opacity .35s}.tbx-1086__end{margin-left:auto;width:24px;height:24px;overflow:hidden;font-size:22px}
.tbx-1086__end span{position:absolute;top:-4px;left:0;transition:transform .4s}.tbx-1086__end span:first-child{transform:translate(-30px,30px)}
.tbx-1086:is(:hover,:focus-visible){color:#fff;border-color:#243e58}.tbx-1086:is(:hover,:focus-visible):before{transform:scaleX(1);transform-origin:left}.tbx-1086:is(:hover,:focus-visible) .tbx-1086__leading{transform:translate(14px,-14px);opacity:0}
.tbx-1086:is(:hover,:focus-visible) .tbx-1086__end span:first-child{transform:translate(0,0)}.tbx-1086:is(:hover,:focus-visible) .tbx-1086__end span:last-child{transform:translate(30px,-30px)}
.tbx-1086:focus-visible{outline:3px solid #dfab6d;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1086,.tbx-1086 *,.tbx-1086:before{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では本来のリンク・操作を優先し、必要な情報は通常状態でも理解できるようにしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。