Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1242"><a class="quote" href="#quote"><span class="eyebrow">FIXED PRICE WEB DESIGN</span><span class="main">Get a quote <span aria-hidden="true">↗</span></span><span class="meter"><span class="bar"><i></i></span><span class="amount">Plans from ¥120,000</span></span></a></div>CSS
.tbx-1242{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:212px;overflow:hidden;padding:16px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#193647;}
.tbx-1242 *, .tbx-1242 *::before,.tbx-1242 *::after{box-sizing:border-box}
.tbx-1242{background:#eff0e8}.tbx-1242 .quote{display:grid;gap:11px;width:min(100%,274px);padding:22px 22px 20px;border:1px solid #b7b38e;background:#fffcf0;border-radius:7px;color:#4a4231;text-decoration:none;box-shadow:5px 5px 0 #d8d9c2;transition:transform .3s,box-shadow .3s}.tbx-1242 .eyebrow{font:750 9px system-ui;letter-spacing:.12em;color:#887b59}.tbx-1242 .main{font-size:22px;font-weight:800;display:flex;justify-content:space-between;gap:8px}.tbx-1242 .main span{font-size:19px}.tbx-1242 .meter{display:grid;gap:7px;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s,opacity .35s}.tbx-1242 .bar{display:block;background:#e2dec9;height:6px;border-radius:9px;overflow:hidden}.tbx-1242 .bar i{display:block;width:70%;height:100%;background:#b66c48;transform:translateX(-110%);transition:transform .48s .12s}.tbx-1242 .amount{font-size:11px;font-weight:700;color:#765e48}.tbx-1242 .quote:is(:hover,:focus-visible){transform:translate(-3px,-3px);box-shadow:8px 8px 0 #d8d9c2}.tbx-1242 .quote:is(:hover,:focus-visible) .meter{max-height:55px;opacity:1}.tbx-1242 .quote:is(:hover,:focus-visible) .bar i{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.tbx-1242 *, .tbx-1242 *::before, .tbx-1242 *::after{{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Pricing, CTA
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末はホバーできないことがあります。必要な操作や情報はタップでも利用できるようにしてください。
Browser：最新版のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduce対応。