Live Demo
ホバー操作、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1289" type="button"><span class="tbx-1289__head"><span class="tbx-1289__dot"></span><strong>VISIT OUR STORE</strong><span class="tbx-1289__plus">+</span></span><span class="tbx-1289__foot"><span>OPEN TODAY</span><b>10:00 – 19:00</b></span></button>CSS
*{box-sizing:border-box}
.tbx-1289{display:block;width:286px;max-width:100%;height:120px;padding:0;border:0;border-radius:12px;background:#183a45;color:white;cursor:pointer;overflow:hidden;font-family:system-ui,sans-serif;text-align:left;box-shadow:0 12px 26px #1c3a4930}
.tbx-1289__head{display:flex;align-items:center;gap:11px;height:80px;padding:0 22px;transition:height .42s ease}.tbx-1289__head strong{font-size:13px;letter-spacing:.09em;flex:1}.tbx-1289__dot{width:10px;height:10px;background:#bfe68b;border-radius:50%;box-shadow:0 0 0 5px #bfe68b19}.tbx-1289__plus{font-size:23px;font-weight:300;transition:transform .4s}
.tbx-1289__foot{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 22px;background:#c9f0aa;color:#12392c;transform:translateY(28px);opacity:.65;transition:transform .42s,opacity .42s}.tbx-1289__foot span{font-size:9px;letter-spacing:.12em;font-weight:750}.tbx-1289__foot b{font-size:13px}.tbx-1289:hover .tbx-1289__head,.tbx-1289:focus-visible .tbx-1289__head{height:80px}.tbx-1289:hover .tbx-1289__foot,.tbx-1289:focus-visible .tbx-1289__foot{transform:translateY(0);opacity:1}.tbx-1289:hover .tbx-1289__plus,.tbx-1289:focus-visible .tbx-1289__plus{transform:rotate(135deg)}.tbx-1289:focus-visible{outline:3px solid #528fa7;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.tbx-1289 *,.tbx-1289::before,.tbx-1289::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Local Business
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバー動作が異なるため、フォーカス操作・実案件のタップ操作を確認してください。
Browser：Chrome / Firefox / Edge / Safariの標準CSS機能を使用します。
Reduced Motion：prefers-reduced-motion: reduceでCSSアニメーション・トランジションを停止します。