Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1135" href="#concept"><span class="tbx-1135__ruby" aria-hidden="true">CONCEPT / 01</span><span class="tbx-1135__main">暮らしを、整える。</span><span class="tbx-1135__rule" aria-hidden="true"></span></a>CSS
.tbx-1135{font-family:system-ui,sans-serif;position:relative;display:block;width:min(315px,100%);padding:22px 0 17px;text-decoration:none;color:#273d40}
.tbx-1135__ruby{position:absolute;top:3px;left:0;color:#9b615e;letter-spacing:.18em;font-size:10px;font-weight:800;opacity:0;transform:translateY(9px);transition:opacity .34s,transform .4s}
.tbx-1135__main{font-size:23px;font-weight:800;letter-spacing:.03em;line-height:1.6;transition:letter-spacing .45s}
.tbx-1135__rule{position:absolute;left:0;bottom:12px;right:0;height:1px;background:#c5d1cf;overflow:hidden}
.tbx-1135__rule:after{content:"";display:block;height:100%;width:100%;background:#a05e5e;transform:translateX(-100%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tbx-1135:is(:hover,:focus-visible) .tbx-1135__ruby{opacity:1;transform:translateY(0)}.tbx-1135:is(:hover,:focus-visible) .tbx-1135__main{letter-spacing:.07em}.tbx-1135:is(:hover,:focus-visible) .tbx-1135__rule:after{transform:translateX(0)}
.tbx-1135:focus-visible{outline:2px solid #a05e5e;outline-offset:5px}
@media (prefers-reduced-motion: reduce) { .tbx-1135, .tbx-1135 *, .tbx-1135::before, .tbx-1135::after, .tbx-1135 *::before, .tbx-1135 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Education
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。