Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1154" aria-label="作品カテゴリ"><a href="#branding"><span class="tbx-1154__front">Branding <b>↗</b></span><span class="tbx-1154__ghost" aria-hidden="true">Visual Identity</span><span class="tbx-1154__under" aria-hidden="true">SELECT / 01</span></a></nav>CSS
.tbx-1154{box-sizing:border-box;width:min(305px,100%);min-height:145px;display:grid;place-items:center;background:#f8f2e9;border-radius:9px;font-family:system-ui,sans-serif;overflow:hidden}
.tbx-1154 a{position:relative;display:block;width:244px;max-width:92%;height:62px;text-decoration:none;color:#fff}
.tbx-1154__front,.tbx-1154__ghost,.tbx-1154__under{box-sizing:border-box;position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 17px;height:57px;border-radius:5px;transition:transform .46s cubic-bezier(.2,.8,.2,1)}
.tbx-1154__front{top:0;z-index:3;background:#425b4b;font-size:19px;font-weight:800}.tbx-1154__ghost{top:0;z-index:2;background:#b5c7a7;color:#304c39;font-size:11px;letter-spacing:.1em;font-weight:800}.tbx-1154__under{top:0;z-index:1;background:#e9b786;color:#634934;font-size:10px;letter-spacing:.16em;font-weight:800}
.tbx-1154 a:is(:hover,:focus-visible) .tbx-1154__ghost{transform:translate(9px,-20px)}.tbx-1154 a:is(:hover,:focus-visible) .tbx-1154__under{transform:translate(-9px,22px)}
.tbx-1154 a:focus-visible{outline:3px solid #956b40;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1154, .tbx-1154 *, .tbx-1154::before, .tbx-1154::after, .tbx-1154 *::before, .tbx-1154 *::after { animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。