Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1241"><a class="hotline" href="tel:0000000000"><span class="mark" aria-hidden="true">☎</span><span class="label"><small>CONTACT DESK</small><strong>Call our team</strong></span><span class="detail"><strong>00-0000-0000</strong><small>Weekdays 9:00–18:00</small></span><span class="arrow" aria-hidden="true">↗</span></a></div>CSS
.tbx-1241{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-1241 *, .tbx-1241 *::before,.tbx-1241 *::after{box-sizing:border-box}
.tbx-1241{background:#e5e8e9}.tbx-1241 .hotline{width:min(100%,320px);min-height:95px;position:relative;display:flex;align-items:center;padding:17px;gap:12px;border-radius:6px;background:#132e43;color:white;text-decoration:none;overflow:hidden;box-shadow:0 13px 25px #203d4725}.tbx-1241 .mark{display:grid;place-items:center;flex:0 0 39px;height:39px;border:1px solid #8bc2ca;border-radius:50%;font-size:22px;color:#a4e0da;transform:rotate(-20deg);transition:transform .4s}.tbx-1241 .label{display:grid;gap:5px;white-space:nowrap;min-width:0;transition:opacity .3s,transform .35s,width .3s;flex:1}.tbx-1241 small{font-size:9px;letter-spacing:.1em}.tbx-1241 .label small{color:#96b9c3}.tbx-1241 .label strong{font-size:15px}.tbx-1241 .detail{position:absolute;left:68px;top:50%;transform:translate(10px,-35%);display:grid;gap:6px;opacity:0;pointer-events:none;transition:opacity .32s,transform .35s}.tbx-1241 .detail strong{font-size:17px;letter-spacing:.03em}.tbx-1241 .detail small{color:#c1dde1;letter-spacing:0}.tbx-1241 .arrow{font-size:20px;margin-left:auto}.tbx-1241 .hotline:is(:hover,:focus-visible) .label{opacity:0;transform:translateX(-13px)}.tbx-1241 .hotline:is(:hover,:focus-visible) .detail{opacity:1;transform:translate(0,-50%)}.tbx-1241 .hotline:is(:hover,:focus-visible) .mark{transform:rotate(0)}
@media(prefers-reduced-motion:reduce){.tbx-1241 *, .tbx-1241 *::before, .tbx-1241 *::after{{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Contact, Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末はホバーできないことがあります。必要な操作や情報はタップでも利用できるようにしてください。
Browser：最新版のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduce対応。