Live Demo
マウスを乗せるかTabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1026" type="button"><span>お問い合わせ</span></button>
CSS
.tbx-1026{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-width:178px;min-height:51px;padding:13px 24px;border:1px solid #247b83;border-radius:30px;background:#eaf6f3;color:#15565b;font:700 14px/1.4 system-ui,sans-serif;cursor:pointer;transition:background .25s ease}
.tbx-1026::after{content:"";position:absolute;inset:-2px;z-index:-1;border:2px solid #2d9892;border-radius:inherit;opacity:0;transform:scale(.97);transition:transform .48s cubic-bezier(.15,.75,.25,1),opacity .35s ease}
.tbx-1026:is(:hover,:focus-visible){background:#d8f3ee}
.tbx-1026:is(:hover,:focus-visible)::after{opacity:1;transform:scale(1.18)}
.tbx-1026:focus-visible{outline:3px solid #855fc2;outline-offset:7px}
@media(prefers-reduced-motion:reduce){.tbx-1026,.tbx-1026::after{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
問い合わせ・予約など主要CTA
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作が必要な素材はクリック・入力にも対応。hover専用装飾は重要情報を隠さない設計です。
Browser：最新のChrome、Firefox、Safari、Edge向けのCSS。複数環境で最終検証してください。
Reduced Motion：prefers-reduced-motion: reduceに対応。