Live Demo
素材の上にマウスを乗せるか、Tabキーでフォーカスして確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1182" href="#plans"><span class="tbx-1182__ring" aria-hidden="true"></span><span class="tbx-1182__text">Start a project</span><span class="tbx-1182__dot" aria-hidden="true">↗</span></a>
CSS
.tbx-1182{box-sizing:border-box;position:relative;isolation:isolate;width:245px;max-width:100%;height:68px;display:flex;align-items:center;justify-content:space-between;padding:10px 13px 10px 24px;border-radius:999px;background:#262b47;color:white;border:2px solid #262b47;text-decoration:none;font:750 14px system-ui,sans-serif;transition:background .35s,color .35s}.tbx-1182__ring{pointer-events:none;position:absolute;inset:-8px;border-radius:999px;border:2px solid #b2bfda;z-index:-1;transition:transform .42s,opacity .42s}.tbx-1182::after{content:"";pointer-events:none;position:absolute;inset:5px;border:1px dashed #9eadc9;border-radius:999px;transition:transform .42s,opacity .42s}.tbx-1182__text{position:relative;z-index:1}.tbx-1182__dot{width:40px;height:40px;border-radius:50%;background:#f9bd76;color:#262b47;display:grid;place-items:center;font:800 21px system-ui;transition:transform .4s,background .4s}.tbx-1182:is(:hover,:focus-visible){background:#384777}.tbx-1182:is(:hover,:focus-visible) .tbx-1182__ring{transform:translate(-8px,6px)}.tbx-1182:is(:hover,:focus-visible)::after{transform:translate(7px,-5px);opacity:.65}.tbx-1182:is(:hover,:focus-visible) .tbx-1182__dot{transform:rotate(45deg);background:#f7dd94}.tbx-1182:focus-visible{outline:3px solid #e8b77a;outline-offset:9px}
@media (prefers-reduced-motion:reduce) {.tbx-1182,.tbx-1182 *,.tbx-1182::before,.tbx-1182::after,.tbx-1182 *::before,.tbx-1182 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Pricing
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバーのみに隠さないよう実案件で調整してください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。一部の表現ではCSS :has()を利用。
Reduced Motion：prefers-reduced-motion: reduce に対応。