Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button type="button" class="tbx-1169"><span class="tbx-1169__label">GET THE GUIDE</span><span class="tbx-1169__icon" aria-hidden="true">↗</span><svg aria-hidden="true" viewBox="0 0 260 64" preserveAspectRatio="none"><rect class="tbx-1169__stroke" x="1.5" y="1.5" width="257" height="61" rx="7"/></svg></button>
CSS
.tbx-1169{appearance:none;position:relative;isolation:isolate;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:space-between;gap:34px;min-width:260px;height:64px;padding:0 24px;border:1px solid #aab8c6;border-radius:8px;background:#fff;color:#142d41;cursor:pointer;font:700 13px/1.2 system-ui, sans-serif;letter-spacing:.09em;overflow:hidden;transition:background .35s,color .35s}.tbx-1169__icon{font-size:24px;font-weight:400;transition:transform .4s}.tbx-1169 svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.tbx-1169__stroke{fill:none;stroke:#13a09d;stroke-width:3;stroke-dasharray:644;stroke-dashoffset:644;transition:stroke-dashoffset .65s ease}.tbx-1169:is(:hover,:focus-visible){background:#f0fafa}.tbx-1169:is(:hover,:focus-visible) .tbx-1169__stroke{stroke-dashoffset:0}.tbx-1169:is(:hover,:focus-visible) .tbx-1169__icon{transform:translate(4px,-4px)}.tbx-1169:focus-visible{outline:3px solid #176f7c;outline-offset:5px}
@media (prefers-reduced-motion: reduce) { .tbx-1169, .tbx-1169 *, .tbx-1169::before, .tbx-1169::after, .tbx-1169 *::before, .tbx-1169 *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Download
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても必要な情報にアクセスできる実装を推奨。
Browser：Chrome・Firefox・Safari・Edgeの現行版を想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。