Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1268"><button class="sample" type="button"><span class="label">TYPOGRAPHY</span><span class="word">FORM <b>&</b> SPACE</span><span class="gauge" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span><span class="size">TRACKING · +80</span></button></div>CSS
.tbx-1268{width:100%;min-height:218px;box-sizing:border-box;display:grid;place-items:center;padding:18px;background:#eae9e5;color:#242d36;font-family:system-ui,sans-serif}.tbx-1268 *{box-sizing:border-box}
.tbx-1268 .sample{max-width:100%;min-width:min(328px,100%);border:1px solid #b7b8b2;background:#f9f8f5;padding:22px 17px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:9px;align-items:center;font:inherit}
.tbx-1268 .label,.tbx-1268 .size{font:700 9px system-ui;letter-spacing:.14em;color:#777c7e}.tbx-1268 .word{font-weight:900;font-size:clamp(14px,3vw,21px);letter-spacing:.02em;white-space:nowrap;transition:letter-spacing .43s,color .43s}.tbx-1268 .word b{font-weight:300;color:#aa705a}
.tbx-1268 .gauge{display:flex;align-items:flex-start;justify-content:space-between;gap:5px;width:145px;height:12px;transition:width .43s}
.tbx-1268 .gauge i{height:4px;width:1px;background:#89918d;transition:height .43s,background .43s}.tbx-1268 .gauge i:nth-child(3n+1){height:8px}
.tbx-1268 .sample:is(:hover,:focus-visible) .word{letter-spacing:.12em;color:#a5563b}.tbx-1268 .sample:is(:hover,:focus-visible) .gauge{width:220px;max-width:90%}.tbx-1268 .sample:is(:hover,:focus-visible) .gauge i{height:8px;background:#b07156}.tbx-1268 .sample:is(:hover,:focus-visible) .gauge i:nth-child(3n+1){height:12px}
.tbx-1268 :focus-visible{outline:3px solid #ae6045;outline-offset:3px}
@media(max-width:370px){.tbx-1268 .word{font-size:14px}.tbx-1268 .sample:is(:hover,:focus-visible) .word{letter-spacing:.07em}}
@media(prefers-reduced-motion:reduce){.tbx-1268 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio, Typography
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーができないため、フォーカス・タッチ操作を確認してください。
Browser：現行版のChrome・Safari・Firefox・Edgeを推奨。:has()を利用する素材は古いブラウザでは挙動が異なる場合があります。
Reduced Motion：prefers-reduced-motion: reduce 対応。