Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1259"><button class="product" type="button"><span class="main"><span class="product-icon" aria-hidden="true">◫</span><span class="text"><b>OBJECT 14</b><small>Minimal desk accessory</small></span><strong>¥4,800</strong></span><span class="slip"><span>✓ 2-year warranty</span><span>✓ Ships in 2 days</span></span></button></div>CSS
.tbx-1259{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-1259 *,.tbx-1259 *::before,.tbx-1259 *::after{box-sizing:border-box}
.tbx-1259{background:#f3f0ea}
.tbx-1259 .product{border:1px solid #ddd9d1;cursor:pointer;color:#253b3e;background:#fff;width:min(300px,100%);padding:0;text-align:left;box-shadow:0 4px 12px #3332;overflow:hidden}
.tbx-1259 .main{display:flex;gap:11px;padding:18px;align-items:center}
.tbx-1259 .product-icon{display:grid;place-items:center;width:60px;height:65px;background:linear-gradient(145deg,#c4c3b4,#718984);font:33px Georgia;color:#e8eeea}
.tbx-1259 .text{display:grid;gap:5px;flex:1}
.tbx-1259 .text b{font-size:12px;letter-spacing:.11em}
.tbx-1259 .text small{font-size:9px;color:#738183}
.tbx-1259 .main strong{font-size:13px;white-space:nowrap}
.tbx-1259 .slip{display:flex;justify-content:space-between;gap:6px;padding:0 15px;max-height:0;opacity:0;transform:translateY(-7px);overflow:hidden;background:#e4ece7;transition:max-height .42s,padding .42s,opacity .28s,transform .42s;font-size:10px;color:#345e50}
.tbx-1259 .product:is(:hover,:focus-visible) .slip{max-height:62px;opacity:1;transform:none;padding:12px 15px}
@media (prefers-reduced-motion: reduce) {.tbx-1259 *, .tbx-1259 *::before, .tbx-1259 *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Product, Ecommerce
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーが利用できない場合があります。リンク・入力操作をホバー専用にしないでください。
Browser：Chrome・Firefox・Safari・Edgeの現行版を推奨。:has()利用素材は現行版で確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。