Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#work" class="tbx-1112"><span class="tbx-1112__prefix">OUR</span><span class="tbx-1112__window"><strong>WORKS</strong><strong>IDEAS</strong></span><span class="tbx-1112__arrow" aria-hidden="true">↗</span><small>EXPLORE THE STUDIO</small></a>
CSS
.tbx-1112{display:flex;position:relative;align-items:center;justify-content:center;gap:9px;width:min(286px,100%);height:130px;background:#272c45;color:#f3eddc;text-decoration:none;font-family:system-ui,sans-serif;border-radius:8px;overflow:hidden;padding:18px}
.tbx-1112__prefix{font-size:29px;letter-spacing:-.06em;font-weight:300}.tbx-1112__window{display:flex;flex-direction:column;height:42px;line-height:42px;overflow:hidden;font-weight:900;font-size:29px;letter-spacing:-.07em}.tbx-1112__window strong{height:42px;flex:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.tbx-1112__window strong:nth-child(2){color:#ebc48f}.tbx-1112__arrow{font-size:24px;color:#ebc48f;transition:transform .4s}.tbx-1112 small{position:absolute;bottom:16px;letter-spacing:.17em;font-size:8px;color:#b7b6c4}
.tbx-1112:is(:hover,:focus-visible) .tbx-1112__window strong{transform:translateY(-42px)}.tbx-1112:is(:hover,:focus-visible) .tbx-1112__arrow{transform:translate(3px,-3px)}
.tbx-1112:focus-visible{outline:3px solid #ebc48f;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1112 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Headings / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。