Live Demo
対象要素をマウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1279" href="#portfolio" aria-label="Craft, Shape, Create"><span>Craft</span><span>Shape</span><span>Create ↗</span></a>
CSS
.tbx-1279{box-sizing:border-box;display:inline-flex;max-width:100%;align-items:end;gap:9px;flex-wrap:wrap;padding:12px 6px;border-bottom:2px solid #304e56;color:#1f414c;text-decoration:none;font:750 clamp(17px,4.3vw,24px)/1.35 system-ui,sans-serif;letter-spacing:-.04em}
.tbx-1279 span{display:inline-block;position:relative;transition:transform .36s cubic-bezier(.2,.8,.3,1),color .36s}
.tbx-1279 span:nth-child(2){transition-delay:.055s}.tbx-1279 span:nth-child(3){transition-delay:.11s}
.tbx-1279:hover span,.tbx-1279:focus-visible span{transform:translateY(-9px);color:#dc7240}
.tbx-1279:focus-visible{outline:3px solid #dc7240;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1279 span{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバーと同じ結果にならないため、タップ・フォーカス時の動作も確認してください。
Browser：現行Chrome / Firefox / Edge / SafariのCSS機能を利用します。
Reduced Motion：prefers-reduced-motion: reduce でアニメーションを停止します。