Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#explore" class="tbx-1107"><span class="tbx-1107__disc" aria-hidden="true"><span class="tbx-1107__ticks"></span><svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19 45 45 19M26 19h19v19"/></svg></span><span class="tbx-1107__label"><small>EXPLORE</small><strong>詳しく見る</strong></span></a>
CSS
.tbx-1107{display:flex;align-items:center;gap:16px;width:min(282px,100%);padding:15px;background:#ecf1ed;border-radius:10px;color:#304c45;text-decoration:none;font-family:system-ui,sans-serif}
.tbx-1107__disc{height:82px;width:82px;border-radius:50%;background:#315f53;color:#fff;display:grid;place-items:center;position:relative;flex:none}.tbx-1107__disc svg{width:37px;height:37px;position:relative;z-index:1;transition:transform .48s}
.tbx-1107__ticks{position:absolute;inset:8px;border-radius:50%;border:2px dashed #b4e2c8;opacity:.76;transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .35s}
.tbx-1107__label{display:flex;flex-direction:column;gap:7px}.tbx-1107__label small{font-size:9px;letter-spacing:.18em;font-weight:750;color:#6b8679}.tbx-1107__label strong{font-size:15px;font-weight:750;white-space:nowrap}
.tbx-1107:is(:hover,:focus-visible) .tbx-1107__ticks{transform:rotate(75deg);opacity:1}.tbx-1107:is(:hover,:focus-visible) .tbx-1107__disc svg{transform:translate(3px,-3px) scale(1.08)}
.tbx-1107:focus-visible{outline:3px solid #95b6a4;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1107 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Features
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。