Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1122" href="#catalog"><span class="tbx-1122__copy"><small>CATALOGUE</small><strong>商品一覧を見る</strong></span><span class="tbx-1122__well" aria-hidden="true"><i>→</i></span></a>CSS
.tbx-1122{display:flex;align-items:center;justify-content:space-between;width:min(279px,100%);height:88px;background:#eeeae3;border:1px solid #d4cec4;border-radius:44px;padding:8px 8px 8px 21px;text-decoration:none;color:#384f50;font-family:system-ui,sans-serif;overflow:hidden;transition:background .34s}.tbx-1122__copy{display:flex;flex-direction:column;gap:7px}.tbx-1122__copy small{color:#9a7763;font-size:9px;letter-spacing:.17em;font-weight:800}.tbx-1122 strong{font-size:16px}.tbx-1122__well{width:70px;height:70px;border-radius:40px;background:#d5e2de;position:relative;overflow:hidden;display:grid;place-items:center;transition:background .38s}.tbx-1122__well::after{content:"";position:absolute;left:30%;top:31%;height:38%;width:2px;background:#6e9088;opacity:.7}.tbx-1122__well i{font:normal 29px/1 system-ui,sans-serif;position:relative;z-index:1;color:#254f4d;transform:translateX(-10px);transition:transform .5s cubic-bezier(.2,.8,.2,1)}.tbx-1122:is(:hover,:focus-visible){background:#e5efea}.tbx-1122:is(:hover,:focus-visible) .tbx-1122__well{background:#b6d2c8}.tbx-1122:is(:hover,:focus-visible) i{transform:translateX(13px)}.tbx-1122:focus-visible{outline:3px solid #619386;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1122,.tbx-1122 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Downloads
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報は通常時から見える状態にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。