Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1168" role="group" aria-label="適用中のフィルター"><span class="tbx-1168__hint">ACTIVE FILTERS</span><div class="tbx-1168__tags"><button type="button" class="tbx-1168__tag" aria-label="Designのフィルターを解除"><span>Design</span><b aria-hidden="true">×</b></button><button type="button" class="tbx-1168__tag" aria-label="CSSのフィルターを解除"><span>CSS</span><b aria-hidden="true">×</b></button></div><small>Hover or focus a tag to reveal the remove action</small></div>
CSS
.tbx-1168{box-sizing:border-box;width:275px;max-width:100%;padding:15px 14px;background:#f5f0ff;border:1px solid #ded1f8;border-radius:12px;font-family:system-ui,sans-serif;color:#453568}.tbx-1168__hint{display:block;font-size:9px;font-weight:850;letter-spacing:.12em;color:#8b78b1}.tbx-1168__tags{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}.tbx-1168__tag{box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #bda9e4;border-radius:999px;background:#fff;color:#514078;font:750 11px system-ui,sans-serif;cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s}.tbx-1168__tag b{display:grid;place-items:center;border-radius:50%;width:0;height:22px;opacity:0;overflow:hidden;transform:scale(.6);background:#694898;color:#fff;font-size:16px;transition:opacity .3s,transform .3s,width .3s}.tbx-1168__tag:is(:hover,:focus-visible){background:#e9dafa;border-color:#9679ca;box-shadow:0 5px 10px #7456ac1d}.tbx-1168__tag:is(:hover,:focus-visible) b{opacity:1;width:22px;transform:scale(1)}.tbx-1168 small{color:#8b79a8;font-size:9px}.tbx-1168__tag:focus-visible{outline:2px solid #7350a4;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1168, .tbx-1168 *, .tbx-1168::before, .tbx-1168::after, .tbx-1168 *::before, .tbx-1168 *::after {animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Search / Filter
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても操作・情報取得ができるようにしてください。
Browser：最近のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。