Live Demo
マウスを乗せるか、Tabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1195" href="#design-policy"><span class="tbx-1195__num" aria-hidden="true">07</span><span class="tbx-1195__top">OUR APPROACH</span><strong>つくる理由を、<br>伝わる形に。</strong><span class="tbx-1195__line" aria-hidden="true"></span></a>
CSS
.tbx-1195{width:265px;max-width:100%;min-height:160px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:21px 16px;position:relative;text-decoration:none;color:#1d3340;background:#f4f1e9;overflow:hidden;font-family:system-ui;border:1px solid #e0dccc}.tbx-1195__num{font-size:124px;line-height:1;position:absolute;right:-6px;bottom:-22px;letter-spacing:-.12em;font-weight:900;color:#cadad0;opacity:.19;transform:translateY(26px) scale(.82);transition:opacity .4s,transform .48s}.tbx-1195__top{font-size:9px;letter-spacing:.2em;font-weight:800;color:#a67853;z-index:1}.tbx-1195 strong{z-index:1;line-height:1.5;font-size:19px;letter-spacing:.03em;margin-top:7px}.tbx-1195__line{height:3px;width:37px;background:#af684d;z-index:1;margin-top:12px;transition:width .5s}.tbx-1195:is(:hover,:focus-visible) .tbx-1195__num{opacity:.7;transform:translateY(0) scale(1)}.tbx-1195:is(:hover,:focus-visible) .tbx-1195__line{width:83px}.tbx-1195:focus-visible{outline:3px solid #ae6c4b;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1195,.tbx-1195 *,.tbx-1195::before,.tbx-1195::after,.tbx-1195 *::before,.tbx-1195 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Heading / Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバー時にだけ隠さない設計にしてください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。:has()およびclip-path等は対応ブラウザを確認。
Reduced Motion：prefers-reduced-motion: reduce 対応。