Live Demo
対象要素をマウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1277" type="button"><span class="tbx-1277__left" aria-hidden="true">❮</span><span class="tbx-1277__label">サービスを見る</span><span class="tbx-1277__right" aria-hidden="true">❯</span></button>
CSS
.tbx-1277{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;position:relative;isolation:isolate;gap:12px;min-width:224px;max-width:100%;padding:18px 24px;border:1px solid #254e65;border-radius:4px;background:#f7fcff;color:#173e54;font:700 15px/1.4 system-ui,sans-serif;letter-spacing:.03em;cursor:pointer;overflow:hidden;transition:color .4s,box-shadow .4s}
.tbx-1277::before,.tbx-1277::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;width:51%;background:#173e54;transform:scaleX(0);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.tbx-1277::before{left:0;transform-origin:left}.tbx-1277::after{right:0;transform-origin:right}
.tbx-1277__left,.tbx-1277__right{font-size:13px;color:#217f9b;transition:transform .4s,color .4s}
.tbx-1277:hover::before,.tbx-1277:hover::after,.tbx-1277:focus-visible::before,.tbx-1277:focus-visible::after{transform:scaleX(1)}
.tbx-1277:hover,.tbx-1277:focus-visible{color:white;box-shadow:0 12px 30px #173e542d}
.tbx-1277:hover .tbx-1277__left,.tbx-1277:focus-visible .tbx-1277__left{transform:translateX(-5px);color:#a9e7fb}
.tbx-1277:hover .tbx-1277__right,.tbx-1277:focus-visible .tbx-1277__right{transform:translateX(5px);color:#a9e7fb}
.tbx-1277:focus-visible{outline:3px solid #69bcde;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1277,.tbx-1277::before,.tbx-1277::after,.tbx-1277__left,.tbx-1277__right{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Business
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバーと同じ結果にならないため、タップ・フォーカス時の動作も確認してください。
Browser：現行Chrome / Firefox / Edge / SafariのCSS機能を利用します。
Reduced Motion：prefers-reduced-motion: reduce でアニメーションを停止します。