Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1157" href="#detail"><span class="tbx-1157__label">Explore services</span><span class="tbx-1157__badge" aria-hidden="true">↗</span></a>
CSS
.tbx-1157{--ink:#18394a;--sky:#9be7da;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-width:252px;max-width:100%;padding:7px 7px 7px 22px;position:relative;border-radius:999px;border:1px solid #244b59;background:#f7fffe;color:var(--ink);font:700 14px/1.2 system-ui,sans-serif;text-decoration:none;overflow:hidden;isolation:isolate;transition:box-shadow .32s ease,transform .32s ease}
.tbx-1157::before{content:"";position:absolute;inset:0 69px 0 0;background:var(--sky);border-radius:999px;transform:translateX(-101%);z-index:-1;transition:transform .45s cubic-bezier(.22,.85,.2,1)}
.tbx-1157__label{transition:transform .35s,color .35s}.tbx-1157__badge{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:var(--ink);color:#fff;font-size:24px;transition:transform .42s cubic-bezier(.2,.7,.15,1),background .3s}
.tbx-1157:is(:hover,:focus-visible){box-shadow:0 10px 25px #1a51522c;transform:translateY(-2px)}.tbx-1157:is(:hover,:focus-visible)::before{transform:translateX(0)}.tbx-1157:is(:hover,:focus-visible) .tbx-1157__label{transform:translateX(6px)}.tbx-1157:is(:hover,:focus-visible) .tbx-1157__badge{background:#185969;transform:rotate(45deg)}.tbx-1157:focus-visible{outline:3px solid #236b78;outline-offset:4px}
@media (prefers-reduced-motion: reduce) {.tbx-1157, .tbx-1157 *, .tbx-1157::before, .tbx-1157::after, .tbx-1157 *::before, .tbx-1157 *::after {animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても操作・情報取得ができるようにしてください。
Browser：最近のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。