Live Demo
マウスを乗せるか、Tabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1196" href="#story"><span class="tbx-1196__eyebrow">STUDIO VALUES</span><span class="tbx-1196__row"><b>Imagine</b><b>Design</b><b>Deliver</b></span><span class="tbx-1196__sub">アイデアから実装まで <span aria-hidden="true">↗</span></span></a>
CSS
.tbx-1196{box-sizing:border-box;display:flex;flex-direction:column;gap:13px;justify-content:center;width:275px;max-width:100%;padding:22px 18px;background:#fcfaf5;color:#263545;text-decoration:none;border:1px solid #e7e1d8;font-family:system-ui}.tbx-1196__eyebrow{font-size:9px;letter-spacing:.16em;color:#b36850;font-weight:800}.tbx-1196__row{display:flex;gap:11px;flex-wrap:wrap}.tbx-1196__row b{font-size:17px;font-weight:750;position:relative;padding-bottom:7px;white-space:nowrap}.tbx-1196__row b::after{content:"";height:3px;background:#dc8154;position:absolute;left:0;bottom:0;width:100%;transform:scaleX(0);transform-origin:left;transition:transform .32s}.tbx-1196__row b:nth-child(1)::after{transition-delay:0s}.tbx-1196__row b:nth-child(2)::after{transition-delay:.12s}.tbx-1196__row b:nth-child(3)::after{transition-delay:.24s}.tbx-1196__sub{font-size:11px;color:#647383;display:flex;justify-content:space-between}.tbx-1196:is(:hover,:focus-visible) .tbx-1196__row b::after{transform:scaleX(1)}.tbx-1196:focus-visible{outline:3px solid #d9774b;outline-offset:2px}
@media (prefers-reduced-motion: reduce) {.tbx-1196,.tbx-1196 *,.tbx-1196::before,.tbx-1196::after,.tbx-1196 *::before,.tbx-1196 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Link / Typography
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバー時にだけ隠さない設計にしてください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。:has()およびclip-path等は対応ブラウザを確認。
Reduced Motion：prefers-reduced-motion: reduce 対応。