Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#story" class="tbx-1159"><span class="tbx-1159__label">THE NEW CHAPTER</span><span class="tbx-1159__type" data-word="Beyond">Beyond</span><span class="tbx-1159__sub">Discover what's next ↗</span></a>
CSS
.tbx-1159{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:21px 19px 18px;width:264px;max-width:100%;background:#f8f0e7;color:#26364b;border-radius:8px;border:1px solid #eadbc9;text-decoration:none;overflow:hidden}.tbx-1159__label{font:800 9px/1.3 system-ui,sans-serif;letter-spacing:.18em;color:#8a655b}.tbx-1159__type{font:900 clamp(39px,13vw,52px)/1 Georgia,serif;position:relative;display:block;isolation:isolate;transition:transform .4s cubic-bezier(.25,.8,.2,1)}.tbx-1159__type::before,.tbx-1159__type::after{content:attr(data-word);position:absolute;inset:0;z-index:-1;opacity:0;transition:transform .4s cubic-bezier(.25,.8,.2,1),opacity .25s}.tbx-1159__type::before{color:#e39e8e;transform:translate(0,0)}.tbx-1159__type::after{color:#9dbab1;z-index:-2;transform:translate(0,0)}.tbx-1159__sub{margin-top:8px;font:650 11px/1.3 system-ui,sans-serif;border-bottom:1px solid currentColor;padding-bottom:3px}.tbx-1159:is(:hover,:focus-visible) .tbx-1159__type{transform:translate(-5px,-5px)}.tbx-1159:is(:hover,:focus-visible) .tbx-1159__type::before{transform:translate(5px,5px);opacity:1}.tbx-1159:is(:hover,:focus-visible) .tbx-1159__type::after{transform:translate(10px,10px);opacity:1}.tbx-1159:focus-visible{outline:3px solid #9e5447;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1159, .tbx-1159 *, .tbx-1159::before, .tbx-1159::after, .tbx-1159 *::before, .tbx-1159 *::after {animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Hero / Typography
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても操作・情報取得ができるようにしてください。
Browser：最近のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。