Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1253"><button class="cta" type="button"><span class="top"><span class="icon">↗</span><span class="main">GET AN ESTIMATE</span></span><span class="detail">通常1営業日以内にご案内 <b>→</b></span></button></div>CSS
.tbx-1253{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-1253 *,.tbx-1253 *::before,.tbx-1253 *::after{box-sizing:border-box}
.tbx-1253{background:#eaf0ea}
.tbx-1253 .cta{appearance:none;position:relative;border:0;background:#244638;color:#fff;width:min(286px,100%);padding:0;border-radius:5px;cursor:pointer;overflow:hidden;text-align:left;box-shadow:0 9px 20px #1f3b3820}
.tbx-1253 .top{height:62px;display:flex;align-items:center;gap:15px;padding:0 20px}
.tbx-1253 .icon{border:1px solid #a1b9a6;border-radius:50%;display:grid;place-items:center;width:29px;height:29px;transition:transform .35s}
.tbx-1253 .main{font-size:12px;font-weight:750;letter-spacing:.12em}
.tbx-1253 .detail{display:flex;align-items:center;justify-content:space-between;background:#d3dcba;color:#213b33;font-size:10px;letter-spacing:.04em;line-height:1.3;max-height:0;padding:0 20px;opacity:0;transition:max-height .38s,padding .38s,opacity .32s}
.tbx-1253 .detail b{font-size:22px;font-weight:400}
.tbx-1253 .cta:is(:hover,:focus-visible) .detail{max-height:60px;padding:12px 20px;opacity:1}
.tbx-1253 .cta:is(:hover,:focus-visible) .icon{transform:rotate(45deg)}
@media (prefers-reduced-motion: reduce) {.tbx-1253 *, .tbx-1253 *::before, .tbx-1253 *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA, Services
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーが利用できない場合があります。リンク・入力操作をホバー専用にしないでください。
Browser：Chrome・Firefox・Safari・Edgeの現行版を推奨。:has()利用素材は現行版で確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。