Live Demo
対象要素をマウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1278" type="button"><span class="tbx-1278__orb" aria-hidden="true"></span><span class="tbx-1278__text">詳しい資料を見る</span><span class="tbx-1278__arrow" aria-hidden="true">↗</span></button>
CSS
.tbx-1278{box-sizing:border-box;display:inline-flex;position:relative;isolation:isolate;align-items:center;justify-content:space-between;gap:18px;max-width:100%;min-width:226px;min-height:62px;padding:15px 19px 15px 28px;border:1px solid #ae7c51;border-radius:999px;background:#fffaf5;color:#71482d;font:700 14px/1.4 system-ui,sans-serif;cursor:pointer;overflow:hidden;transition:color .55s,border-color .55s}
.tbx-1278__orb{position:absolute;z-index:-1;left:22px;top:50%;width:8px;height:8px;border-radius:50%;background:#995f33;transform:translateY(-50%) scale(1);transition:transform .65s cubic-bezier(.19,1,.22,1)}
.tbx-1278__arrow{display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid currentColor;border-radius:50%;font-size:18px;transition:transform .45s,background .45s}
.tbx-1278:hover,.tbx-1278:focus-visible{color:#fff;border-color:#995f33}
.tbx-1278:hover .tbx-1278__orb,.tbx-1278:focus-visible .tbx-1278__orb{transform:translateY(-50%) scale(80)}
.tbx-1278:hover .tbx-1278__arrow,.tbx-1278:focus-visible .tbx-1278__arrow{transform:rotate(45deg);background:#ffffff24}
.tbx-1278:focus-visible{outline:3px solid #e1a572;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1278,.tbx-1278__orb,.tbx-1278__arrow{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Landing Page
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバーと同じ結果にならないため、タップ・フォーカス時の動作も確認してください。
Browser：現行Chrome / Firefox / Edge / SafariのCSS機能を利用します。
Reduced Motion：prefers-reduced-motion: reduce でアニメーションを停止します。