Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1247"><a href="#service" class="service"><span class="head"><span class="mini">OUR SERVICE / 02</span><strong>Brand Identity</strong><span class="copy">Logo · Color · Type</span></span><span class="plans"><b>ESSENTIAL</b><span>Identity essentials</span><b>COMPLETE</b><span>Complete brand toolkit</span></span><span class="foot">See packages <span aria-hidden="true">↗</span></span></a></div>CSS
.tbx-1247{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-1247 *, .tbx-1247 *::before,.tbx-1247 *::after{box-sizing:border-box}
.tbx-1247{background:#eaf0ed}.tbx-1247 .service{display:flex;flex-direction:column;width:min(100%,273px);min-height:165px;padding:17px 18px 12px;border:1px solid #9cb8b1;border-radius:9px;background:#f7fcf8;color:#215048;text-decoration:none;box-shadow:0 8px 18px #31594a19}.tbx-1247 .head{display:grid;gap:8px}.tbx-1247 .mini{font-size:9px;letter-spacing:.12em;color:#6c9687;font-weight:800}.tbx-1247 .head strong{font-size:22px;letter-spacing:-.04em}.tbx-1247 .copy{font-size:11px;color:#759085}.tbx-1247 .plans{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s,opacity .35s,padding .45s}.tbx-1247 .plans b{font-size:9px;letter-spacing:.03em;color:#ac6c40}.tbx-1247 .plans span{font-size:10px}.tbx-1247 .foot{margin-top:auto;padding-top:13px;border-top:1px solid #c5d8d0;display:flex;justify-content:space-between;font-size:10px;font-weight:700}.tbx-1247 .foot span{transition:transform .3s}.tbx-1247 .service:is(:hover,:focus-visible) .plans{max-height:130px;opacity:1;padding:15px 0}.tbx-1247 .service:is(:hover,:focus-visible) .foot span{transform:translate(3px,-3px)}
@media(prefers-reduced-motion:reduce){.tbx-1247 *, .tbx-1247 *::before, .tbx-1247 *::after{{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Services, Pricing
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末はホバーできないことがあります。必要な操作や情報はタップでも利用できるようにしてください。
Browser：最新版のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduce対応。