Live Demo
ホバー操作、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div tabindex="0" class="tbx-1292" role="group" aria-label="Design with intention"><span><i></i>DESIGN</span><span><i></i>WITH</span><span><i></i>INTENTION.</span><small>HOVER FOR EMPHASIS</small></div>CSS
*{box-sizing:border-box}
.tbx-1292{width:300px;max-width:100%;height:147px;display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:5px 6px;padding:20px 10px 24px;background:#1c213c;color:#fff;border-radius:10px;font-family:system-ui,sans-serif;overflow:hidden;cursor:default}.tbx-1292>span{position:relative;isolation:isolate;display:block;padding:7px 5px;font-size:23px;letter-spacing:-.07em;font-weight:900;line-height:1.1}.tbx-1292>span i{position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .4s;transition-delay:0s;background:#f5ae51}.tbx-1292>span:nth-child(2) i{background:#9cc0d3;transform-origin:right}.tbx-1292>span:nth-child(3) i{background:#d1afd5}.tbx-1292>span:nth-child(2){color:#eecb93}.tbx-1292>span:nth-child(3){color:#d7d7e3}.tbx-1292>small{display:block;width:100%;text-align:center;font-size:9px;letter-spacing:.18em;color:#91a0c7;margin-top:3px}.tbx-1292:hover>span i,.tbx-1292:focus-visible>span i{transform:scaleX(1);transition-delay:.08s}.tbx-1292:hover>span:nth-child(2) i,.tbx-1292:focus-visible>span:nth-child(2) i{transition-delay:.2s}.tbx-1292:hover>span:nth-child(3) i,.tbx-1292:focus-visible>span:nth-child(3) i{transition-delay:.3s}.tbx-1292:hover>span,.tbx-1292:focus-visible>span{color:#22253e}.tbx-1292:focus-visible{outline:3px solid #d7a6dd;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.tbx-1292 *,.tbx-1292::before,.tbx-1292::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Headline
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバー動作が異なるため、フォーカス操作・実案件のタップ操作を確認してください。
Browser：Chrome / Firefox / Edge / Safariの標準CSS機能を使用します。
Reduced Motion：prefers-reduced-motion: reduceでCSSアニメーション・トランジションを停止します。