Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1256"><button type="button" class="word" aria-label="Explore selected work"><span class="headline">Selected Work<span class="aster">✳</span></span><span class="sub">EXPLORE / SELECTED PROJECTS</span><span class="baseline" aria-hidden="true"></span></button></div>CSS
.tbx-1256{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:218px;overflow:visible;padding:24px 18px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#243e43}
.tbx-1256 *,.tbx-1256 *::before,.tbx-1256 *::after{box-sizing:border-box}
.tbx-1256{background:#e8edf0}
.tbx-1256 .word{border:0;background:transparent;text-align:left;color:#1e2b38;width:min(308px,100%);cursor:pointer;padding:20px 3px 28px;position:relative;overflow:hidden;font-family:inherit}
.tbx-1256 .headline{white-space:nowrap;display:block;font-family:Georgia,serif;font-size:clamp(25px,7vw,36px);letter-spacing:-.06em;line-height:1.15}
.tbx-1256 .aster{display:inline-block;color:#d2704b;font-family:system-ui;font-size:19px;transform:translate(4px,-7px);transition:transform .45s}
.tbx-1256 .sub{display:block;font-size:8px;font-weight:800;letter-spacing:.19em;max-height:0;opacity:0;transform:translateY(-7px);transition:max-height .38s,opacity .38s,transform .38s}
.tbx-1256 .baseline{position:absolute;bottom:16px;left:0;width:100%;height:2px;background:#94a0a5}
.tbx-1256 .baseline:after{content:"";position:absolute;inset:0;background:#d2704b;transform:translateX(-101%);transition:transform .52s}
.tbx-1256 .word:is(:hover,:focus-visible) .sub{max-height:24px;margin-top:8px;opacity:1;transform:none}
.tbx-1256 .word:is(:hover,:focus-visible) .baseline:after{transform:none}
.tbx-1256 .word:is(:hover,:focus-visible) .aster{transform:translate(5px,-7px) rotate(70deg)}
@media (prefers-reduced-motion: reduce) {.tbx-1256 *, .tbx-1256 *::before, .tbx-1256 *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Hero, Typography
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーが利用できない場合があります。リンク・入力操作をホバー専用にしないでください。
Browser：Chrome・Firefox・Safari・Edgeの現行版を推奨。:has()利用素材は現行版で確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。