Live Demo
対象要素をマウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1280" href="#stories"><span class="tbx-1280__label">OUR STORIES</span><span class="tbx-1280__n" aria-hidden="true">07</span></a>
CSS
.tbx-1280{display:inline-flex;align-items:center;gap:20px;position:relative;padding:15px 3px 16px;color:#342b4b;font:750 20px/1.4 system-ui,sans-serif;letter-spacing:.12em;text-decoration:none;max-width:100%}
.tbx-1280__n{color:#917cb7;font:700 11px/1 system-ui,sans-serif}
.tbx-1280::before,.tbx-1280::after{content:"";position:absolute;bottom:5px;width:50%;height:3px;transform:scaleX(0);transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.tbx-1280::before{left:0;background:#a68ce0;transform-origin:right}
.tbx-1280::after{right:0;background:#e39b88;transform-origin:left;transition-delay:.06s}
.tbx-1280:hover::before,.tbx-1280:hover::after,.tbx-1280:focus-visible::before,.tbx-1280:focus-visible::after{transform:scaleX(1)}
.tbx-1280:focus-visible{outline:3px solid #a68ce0;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.tbx-1280::before,.tbx-1280::after{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバーと同じ結果にならないため、タップ・フォーカス時の動作も確認してください。
Browser：現行Chrome / Firefox / Edge / SafariのCSS機能を利用します。
Reduced Motion：prefers-reduced-motion: reduce でアニメーションを停止します。