Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1100" href="#article"><span class="tbx-1100__num">07</span><span class="tbx-1100__main"><small>INSIGHTS</small><strong>小さな工夫が<br>使いやすさを変える</strong><span class="tbx-1100__note">DESIGN NOTES <i aria-hidden="true">→</i></span></span><span class="tbx-1100__marker" aria-hidden="true">↗</span></a>
CSS
.tbx-1100{display:flex;align-items:flex-start;gap:12px;width:min(290px,100%);padding:18px 12px;background:#fff;border-top:3px solid #47777b;border-bottom:1px solid #bbcdd1;color:#2a434b;text-decoration:none;font-family:system-ui,sans-serif;position:relative}
.tbx-1100__num{font:italic 21px Georgia,serif;color:#829fa5;flex:none}.tbx-1100__main{display:flex;flex-direction:column;min-width:0;gap:9px;flex:1}.tbx-1100__main small{font-size:8px;font-weight:700;color:#6b969b;letter-spacing:.15em}.tbx-1100__main strong{font-size:14px;line-height:1.48;letter-spacing:-.04em;white-space:nowrap}
.tbx-1100__note{display:inline-flex;align-items:center;gap:7px;font-size:9px;font-weight:800;letter-spacing:.08em;color:#427a7a;opacity:.2;transform:translateX(-12px);transition:transform .36s,opacity .36s}.tbx-1100__note i{font-size:17px;font-weight:400;font-style:normal}
.tbx-1100__marker{font-size:19px;font-weight:350;color:#497d80;transform:translate(0,0);transition:transform .3s}
.tbx-1100:is(:hover,:focus-visible) .tbx-1100__note{opacity:1;transform:translateX(0)}.tbx-1100:is(:hover,:focus-visible) .tbx-1100__marker{transform:translate(3px,-3px)}
.tbx-1100:focus-visible{outline:3px solid #94b0b0;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1100 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Blog
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。