Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1073" href="#demo" aria-label="私たちの仕事について詳しく見る">
<span class="tbx-1073__viewport" aria-hidden="true"><span>Our Work</span><span>View Projects</span></span>
<span class="tbx-1073__arrow" aria-hidden="true">↗</span>
</a>
CSS
.tbx-1073{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(268px,100%);padding:20px 20px;color:#224358;background:#fff;border-bottom:2px solid #bacbd3;text-decoration:none;font:700 18px/1.2 system-ui,sans-serif;transition:border-color .35s}
.tbx-1073__viewport{height:24px;overflow:hidden;display:grid;min-width:0}
.tbx-1073__viewport span{grid-area:1/1;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .28s;white-space:nowrap}
.tbx-1073__viewport span:nth-child(2){transform:translateY(120%);opacity:0;color:#147d7f}
.tbx-1073__arrow{font-size:25px;font-weight:400;transition:transform .35s,color .35s}
.tbx-1073:is(:hover,:focus-visible){border-color:#147d7f}.tbx-1073:is(:hover,:focus-visible) .tbx-1073__viewport span:first-child{transform:translateY(-125%);opacity:0}
.tbx-1073:is(:hover,:focus-visible) .tbx-1073__viewport span:nth-child(2){transform:translateY(0);opacity:1}
.tbx-1073:is(:hover,:focus-visible) .tbx-1073__arrow{transform:translate(3px,-3px);color:#147d7f}
.tbx-1073:focus-visible{outline:3px solid #e2b470;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1073,.tbx-1073 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Links / Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末にはリンクの本来の役割を残し、必要な説明は通常時にも読める形にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。