Live Demo
マウスを乗せるかTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1015" type="button"><span class="tbx-1015__window"><span class="tbx-1015__line">制作実績を見る</span><span class="tbx-1015__line" aria-hidden="true">制作実績を見る</span></span></button>
CSS
.tbx-1015{border:0;background:transparent;padding:8px 5px;color:#16344c;font:750 17px/1.45 system-ui,sans-serif;cursor:pointer}
.tbx-1015__window{display:block;position:relative;height:1.45em;overflow:hidden}
.tbx-1015__line{display:block;white-space:nowrap;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.tbx-1015__line:last-child{color:#267ba0}
.tbx-1015:is(:hover,:focus-visible) .tbx-1015__line{transform:translateY(-100%)}
.tbx-1015:focus-visible{outline:3px solid #7b65db;outline-offset:5px;border-radius:3px}
@media(prefers-reduced-motion:reduce){.tbx-1015__line{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
ヘッダーリンク・ポートフォリオの作品リンク
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではhoverがないため、操作可能要素のフォーカス状態も考慮してください。
Browser：Chrome・Firefox・Safariなどの最新ブラウザで利用可能なCSSを使用。
Reduced Motion：prefers-reduced-motion: reduce に対応。