Live Demo
ホバーまたはTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1050" aria-label="お問い合わせ方法">
<a href="mailto:hello@example.com"><span class="tbx-1050__symbol" aria-hidden="true">✉</span><span><b>メールで相談</b><small>hello@example.com</small></span><span class="tbx-1050__arrow" aria-hidden="true">↗</span></a>
<a href="tel:0312345678"><span class="tbx-1050__symbol" aria-hidden="true">☎</span><span><b>電話で相談</b><small>03-1234-5678</small></span><span class="tbx-1050__arrow" aria-hidden="true">↗</span></a>
</div>
CSS
.tbx-1050{display:grid;gap:9px;width:min(296px,100%);font:12px/1.4 system-ui,sans-serif}
.tbx-1050 a{display:flex;align-items:center;gap:11px;text-decoration:none;color:#2c4658;border:1px solid #d8e1e8;background:white;border-radius:9px;padding:12px 13px;transition:background .23s,border-color .23s,transform .23s}
.tbx-1050__symbol{display:grid;place-items:center;font-size:18px;flex:0 0 32px;width:32px;height:32px;border-radius:8px;background:#eff3f6;color:#49667a}
.tbx-1050 a span:nth-child(2){display:grid;gap:3px;flex:1;min-width:0}.tbx-1050 b{font-size:11px}.tbx-1050 small{font-size:10px;color:#728596;overflow:hidden;text-overflow:ellipsis}.tbx-1050__arrow{font-size:18px;transition:transform .23s;color:#58848c}
.tbx-1050 a:is(:hover,:focus-visible){border-color:#7aa6a9;background:#eaf4f3;transform:translateX(3px)}.tbx-1050 a:is(:hover,:focus-visible) .tbx-1050__arrow{transform:translate(3px,-3px)}
.tbx-1050 a:focus-visible{outline:3px solid #d1a06e;outline-offset:2px}@media(prefers-reduced-motion:reduce){.tbx-1050 a,.tbx-1050__arrow{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Contact / CTA
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末ではタップ・選択による操作が可能な部分を設けています。
Browser：最新のChrome・Firefox・Safari・Edgeでの利用を想定。:has()を使う素材は対応ブラウザが必要です。
Reduced Motion：prefers-reduced-motion: reduce に対応。